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)
<!-- w --><a class="postlink" href="http://www.dixiederbygirls.com/test2/html">www.dixiederbygirls.com/test2/html</a><!-- w -->
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
<html>
<head>
<style type="text/css">
body{
text-align:center;
background-color:blue;
}
#container{
background-image: url("images\blackbox.GIF");
width: 780px;
margin: auto;
text-align: left;
color: #333
padding: 0,0,0,0;
}
#header{
background-image: url("images\header.JPG");
margin-left: 50px;
margin-right: 50px;
width:680;
height:125;
}
#nav{
background-image: url("images\nav.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("images\background.JPG");
background-repeat: no-repeat;
background-position: center;
}
#footer{
background-image: url("images\nav.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=http://www.webdeveloper.com/forum/archive/index.php/"lastpage.htm">Test</a> </li>
</ul>
</div>
<div id="content">
<img class="floatright" border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"images\blackbox.GIF">
<img class="floatright" border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"images\blackbox.GIF">
<img class="floatright" border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"images\blackbox.GIF">
<img class="floatright" border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"\images\blackbox.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>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 "images\pic.jpg"No doctype. Backslashes in the img tags.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">http://www.alistapart.com/articles/doctype/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?Don't leave spaces or new lines between tags and their adjacent content.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?
you can give them 0 margin value in your css
p, ul { margin: 0; }
<!-- w --><a class="postlink" href="http://www.dixiederbygirls.com/test2/html">www.dixiederbygirls.com/test2/html</a><!-- w -->
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
<html>
<head>
<style type="text/css">
body{
text-align:center;
background-color:blue;
}
#container{
background-image: url("images\blackbox.GIF");
width: 780px;
margin: auto;
text-align: left;
color: #333
padding: 0,0,0,0;
}
#header{
background-image: url("images\header.JPG");
margin-left: 50px;
margin-right: 50px;
width:680;
height:125;
}
#nav{
background-image: url("images\nav.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("images\background.JPG");
background-repeat: no-repeat;
background-position: center;
}
#footer{
background-image: url("images\nav.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=http://www.webdeveloper.com/forum/archive/index.php/"lastpage.htm">Test</a> </li>
</ul>
</div>
<div id="content">
<img class="floatright" border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"images\blackbox.GIF">
<img class="floatright" border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"images\blackbox.GIF">
<img class="floatright" border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"images\blackbox.GIF">
<img class="floatright" border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"\images\blackbox.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>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 "images\pic.jpg"No doctype. Backslashes in the img tags.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">http://www.alistapart.com/articles/doctype/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?Don't leave spaces or new lines between tags and their adjacent content.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?
you can give them 0 margin value in your css
p, ul { margin: 0; }