N
notherbox
I would like to ask if someone has the solution to why I can't get a
1px divider on my right column horizontal lines, why the footer is not
showing correctly, and why my background image which keeps my two
columns equal - ALL don't work in IE!?!?
I've added a line-height to the divider attributes hoping it would
resolve at least that problem, but of course it didn't.
Also, if people can tell me how it looks on other browsers and MACs,
that would be great!
(don't let the colors scare you away, they'll change)
Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
html, body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background:#6b3c8a;
}
#wrapper{
width:1003px;
padding:5px;
margin:0 auto;
background:#be188d;
}
#wrapper #header-group{
width:1003px;
background:#fefefe;
}
#wrapper #header-group #top_links{
height:30px;
color:#fefefe;
background-color: #f74b4b;
}
#wrapper #header-group #top_links #menu_top{
float:right;
height:30px;
line-height:30px;
margin:0 4px 0 0;
color:#fefefe;
}
#wrapper #header-group #top_links #menu_top ul{
margin:0;
padding:0;
list-style:none;
}
#wrapper #header-group #top_links #menu_top ul li{
margin:0 2px;
padding:0 6px 0 3px;
display:inline;
border-right:1px #fefefe solid;
}
#wrapper #header-group #top_links #misc_text{
text-indent:4px;
height:30px;
position:absolute;
line-height:30px;
}
#wrapper #header-group #header{
width:1003px;
height:300px;
background:#e692cd;
}
#wrapper #header-group #header_text{
padding:11px;
color:#fefefe;
text-align:right;
font-size:20px;
background-color: #f74b4b;
}
#wrapper #header-group #menu{
padding:5px;
}
#wrapper #header-group #menu ul{
margin:0;
padding:0;
list-style:none;
}
#wrapper #header-group #menu ul li{
margin:0 2px;
padding:3px;
display:inline;
}
#wrapper #content{
margin:0;
background:url(http://i291.photobucket.com/albums/ll297/uno-freeloader/
content_bkg-2-1.jpg) repeat-y; /*I had to make this image height 5px
for photobucket only (they would not accept 1px when uploading which
is what I normally would have it) */
position:relative;
}
#wrapper #content #left_column{
width:767px;
min-height:250px;
background:#e692cd;
float:left;
}
#wrapper #content #right_column{
width:234px;
min-height:250px;
background:#e692cd;
float:right;
}
#wrapper #content #right_column #links{
margin:0;
padding:0;
}
#wrapper #content #right_column #links ul{
margin:0;
padding:0;
list-style:none;
}
#wrapper #content #right_column #links ul li{
margin:2px;
padding:4px;
color:#fefefe;
}
#wrapper #content #right_column #links .divider{
height:1px;
line-height:1px;
margin:0 5px;
background:#fefefe;
}
#wrapper #content #space{
position:relative;
height:5px;
background:#fefefe;
top:5px;
clear:both;
}
#wrapper #content #footer{
position:relative;
clear:both;
height:40px;
line-height:40px;
padding:5px;
top:5px;
background-color: #33CC00;
}
..img_center{
text-align:center;
}
..img_center img{
margin:0 30px 0 30px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header-group">
<div id="top_links">
<div id="misc_text">Some Text, little bitmore, some more and for
good measure some more...</div>
<div id="menu_top">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
</div>
<div id="header"></div>
<div id="header_text">header Text</div>
<div id="menu">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
</ul>
</div>
</div>
<div id="content">
<div id="left_column">
<div class="img_center"><img src="image.jpg" alt="Image"
width="243" height="162" id="place_holder" /><img src="image.jpg"
alt="Image" width="243" height="162" id="place_holder_2" /></div>
</div>
<div id="right_column">
<div id="links">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
<div class="divider"></div>
<ul>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
</ul>
<div class="divider"></div>
<ul>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
</ul>
</div>
</div>
<div id="space"></div>
<div id="footer">footer</div>
</div>
</div>
</body>
</html>
1px divider on my right column horizontal lines, why the footer is not
showing correctly, and why my background image which keeps my two
columns equal - ALL don't work in IE!?!?
I've added a line-height to the divider attributes hoping it would
resolve at least that problem, but of course it didn't.
Also, if people can tell me how it looks on other browsers and MACs,
that would be great!
(don't let the colors scare you away, they'll change)
Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
html, body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background:#6b3c8a;
}
#wrapper{
width:1003px;
padding:5px;
margin:0 auto;
background:#be188d;
}
#wrapper #header-group{
width:1003px;
background:#fefefe;
}
#wrapper #header-group #top_links{
height:30px;
color:#fefefe;
background-color: #f74b4b;
}
#wrapper #header-group #top_links #menu_top{
float:right;
height:30px;
line-height:30px;
margin:0 4px 0 0;
color:#fefefe;
}
#wrapper #header-group #top_links #menu_top ul{
margin:0;
padding:0;
list-style:none;
}
#wrapper #header-group #top_links #menu_top ul li{
margin:0 2px;
padding:0 6px 0 3px;
display:inline;
border-right:1px #fefefe solid;
}
#wrapper #header-group #top_links #misc_text{
text-indent:4px;
height:30px;
position:absolute;
line-height:30px;
}
#wrapper #header-group #header{
width:1003px;
height:300px;
background:#e692cd;
}
#wrapper #header-group #header_text{
padding:11px;
color:#fefefe;
text-align:right;
font-size:20px;
background-color: #f74b4b;
}
#wrapper #header-group #menu{
padding:5px;
}
#wrapper #header-group #menu ul{
margin:0;
padding:0;
list-style:none;
}
#wrapper #header-group #menu ul li{
margin:0 2px;
padding:3px;
display:inline;
}
#wrapper #content{
margin:0;
background:url(http://i291.photobucket.com/albums/ll297/uno-freeloader/
content_bkg-2-1.jpg) repeat-y; /*I had to make this image height 5px
for photobucket only (they would not accept 1px when uploading which
is what I normally would have it) */
position:relative;
}
#wrapper #content #left_column{
width:767px;
min-height:250px;
background:#e692cd;
float:left;
}
#wrapper #content #right_column{
width:234px;
min-height:250px;
background:#e692cd;
float:right;
}
#wrapper #content #right_column #links{
margin:0;
padding:0;
}
#wrapper #content #right_column #links ul{
margin:0;
padding:0;
list-style:none;
}
#wrapper #content #right_column #links ul li{
margin:2px;
padding:4px;
color:#fefefe;
}
#wrapper #content #right_column #links .divider{
height:1px;
line-height:1px;
margin:0 5px;
background:#fefefe;
}
#wrapper #content #space{
position:relative;
height:5px;
background:#fefefe;
top:5px;
clear:both;
}
#wrapper #content #footer{
position:relative;
clear:both;
height:40px;
line-height:40px;
padding:5px;
top:5px;
background-color: #33CC00;
}
..img_center{
text-align:center;
}
..img_center img{
margin:0 30px 0 30px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header-group">
<div id="top_links">
<div id="misc_text">Some Text, little bitmore, some more and for
good measure some more...</div>
<div id="menu_top">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
</div>
<div id="header"></div>
<div id="header_text">header Text</div>
<div id="menu">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
</ul>
</div>
</div>
<div id="content">
<div id="left_column">
<div class="img_center"><img src="image.jpg" alt="Image"
width="243" height="162" id="place_holder" /><img src="image.jpg"
alt="Image" width="243" height="162" id="place_holder_2" /></div>
</div>
<div id="right_column">
<div id="links">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
<div class="divider"></div>
<ul>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
</ul>
<div class="divider"></div>
<ul>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
</ul>
</div>
</div>
<div id="space"></div>
<div id="footer">footer</div>
</div>
</div>
</body>
</html>