/    Sign up×
Community /Pin to ProfileBookmark

2 basics… images and spacing on div

i have a test site at the following (please don’t pay attention to the way it looks.. i was trying to grasp some concepts)

[url]www.dixiederbygirls.com/test2/html[/url]

1.) It seems to load fine in IE but my images seem to be missing in Firefox? Can you see what i’m missing?

2.) In IE between the footer and bottom of the content is a black bar… why is that showing up?

thanks,
shawn

[code]
<html>
<head>
<style type=”text/css”>

body{
text-align:center;
background-color:blue;
}

#container{
background-image: url(“imagesblackbox.GIF”);
width: 780px;
margin: auto;
text-align: left;
color: #333
padding: 0,0,0,0;
}

#header{
background-image: url(“imagesheader.JPG”);
margin-left: 50px;
margin-right: 50px;
width:680;
height:125;
}

#nav{
background-image: url(“imagesnav.JPG”);
margin-left: 50px;
margin-right: 50px;
width:680px;
height:25px;
}

#content{
margin-top: 0;
margin-left: 50px;
margin-right: 50px;
margin-bottom: 0;
background-color:#999;
background-image: url(“imagesbackground.JPG”);
background-repeat: no-repeat;
background-position: center;

}

#footer{
background-image: url(“imagesnav.JPG”);
margin-left: 50px;
margin-right: 50px;
width:680px;
height:25px;
}

ul{
list-style-type: none;
}

.floatright{
float:right;
margin: 10px 10px 0 0;
}

</style>
</head>

<body>
<div id=”container”>
<div id=”header”>
</div>

<div id=”nav”>
<ul>
<li><a href=”lastpage.htm”>Test</a> </li>
</ul>
</div>

<div id=”content”>
<img class=”floatright” border=”0″ src=”imagesblackbox.GIF”>
<img class=”floatright” border=”0″ src=”imagesblackbox.GIF”>
<img class=”floatright” border=”0″ src=”imagesblackbox.GIF”>
<img class=”floatright” border=”0″ src=”imagesblackbox.GIF”>

<p>
This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.
</p>

<p>
This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.
</p>

<p>
This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.This is some text for the container div.
</p>
</div>

<div id=”footer”>
</div>
</div>
</body>
</html>
[/code]

to post a comment
CSS

7 Comments(s)

Copy linkTweet thisAlerts:
@reagan123authorMay 17.2005 — ok... it looks like a got my images worked out... what about the spaces?

Also, there seems to be some space between all of the divs in firefox...what gives?


On a sidenote should it be "images/pic.jpg" or "imagespic.jpg"
Copy linkTweet thisAlerts:
@ray326May 18.2005 — No doctype. Backslashes in the img tags.
Copy linkTweet thisAlerts:
@reagan123authorMay 18.2005 — thanks...i don't know anything about doc types so i'll do a search and see what I can find... Thanks ?

is there a basic one that covers most cases?

i added the following but it still seems to have the spaces in FireFox...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Copy linkTweet thisAlerts:
@reagan123authorMay 18.2005 — thanks for the link.. just what i needed.... ?

i figured out my spacing problem... the <p> element and <ul> tag where causing the spaces to occur... how can i use these elements and not have this be the case?
Copy linkTweet thisAlerts:
@felgallMay 18.2005 — Don't leave spaces or new lines between tags and their adjacent content.
Copy linkTweet thisAlerts:
@BeachSideMay 19.2005 — thanks for the link.. just what i needed.... ?

i figured out my spacing problem... the <p> element and <ul> tag where causing the spaces to occur... how can i use these elements and not have this be the case?[/QUOTE]


you can give them 0 margin value in your css

p, ul { margin: 0; }
×

Success!

Help @reagan123 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...