...Is a royal pain in the backside and I'm so tempted to go back to using tables!
Incase you hadn't noticed I'm new to this whole CSS lark, but really want to stick with it. I thought I had everything working, but then I've stumbled upon a few problems!
Firstly : I got it looking like this:
Great I thought, this CSS lark is easy....then I filled the 'mainbody' with more Lorum Ipsum giving me this nice little glitch:
I know why this is happening, it's because I have the div containing image on the right at a set height, but after trying auto and inherit, neither would automatically stretch it. Is it even possible to do this?
Then I moved onto IE (with a little Lorum Ipsum):
My initial thoughts were *oh fuggles*.... Something is majorly wrong there!
Finally, I put lots of Lorum Ipsum in IE, and things got a little bit better, but not perfect!
Can anyone give me a helping hand? If I can't get these fixed I may just have to go back to tables!
test.html
styles.css
Incase you hadn't noticed I'm new to this whole CSS lark, but really want to stick with it. I thought I had everything working, but then I've stumbled upon a few problems!
Firstly : I got it looking like this:
Great I thought, this CSS lark is easy....then I filled the 'mainbody' with more Lorum Ipsum giving me this nice little glitch:
I know why this is happening, it's because I have the div containing image on the right at a set height, but after trying auto and inherit, neither would automatically stretch it. Is it even possible to do this?
Then I moved onto IE (with a little Lorum Ipsum):
My initial thoughts were *oh fuggles*.... Something is majorly wrong there!
Finally, I put lots of Lorum Ipsum in IE, and things got a little bit better, but not perfect!
Can anyone give me a helping hand? If I can't get these fixed I may just have to go back to tables!
test.html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper"><!-- class wrapper begin -->
<div id="warningstriptop">
</div>
<!-- Tab 1 Top -->
<div id="toptabtop">
</div>
<div id="warningstripbottom">
</div>
<!-- Tab 1 Middle-->
<div id="toptabmiddle">
<div id="tab">
Tab 1<br />Content Goes Here
</div>
</div>
<div id="mainbody">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam commodo lectus. Morbi id lorem sit amet ipsum tempor consectetuer. Fusce sapien. Nullam sapien. In congue adipiscing velit. Aenean congue pellentesque dolor. Duis consequat hendrerit lacus. Etiam adipiscing. Vivamus euismod tincidunt nisi. Pellentesque ornare turpis id enim. Proin congue. Nulla vitae erat porta erat fringilla vestibulum. Fusce sed magna. Nullam sit amet erat. Nulla metus erat, placerat ac, auctor luctus, ornare sit amet, ipsum.
</div>
<div id="tabbottom">
</div>
<!-- Tab 2-->
<div id="tabtop">
</div>
<div id="tabbody">
<div id="tab">
Tab 2<br />Content Goes Here
</div>
</div>
<div id="tabbottom">
</div>
<!-- Tab 3-->
<div id="tabtop">
</div>
<div id="tabbody">
<div id="tab">
<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam commodo lectus. Morbi id lorem sit amet ipsum tempor consectetuer. Fusce sapien. Nullam sapien. In congue adipiscing velit. Aenean congue pellentesque dolor. Duis consequat hendrerit lacus. Etiam adipiscing. Vivamus euismod tincidunt nisi. Pellentesque ornare turpis id enim. Proin congue. Nulla vitae erat porta erat fringilla vestibulum. Fusce sed magna. Nullam sit amet erat. Nulla metus erat, placerat ac, auctor luctus, ornare sit amet, ipsum.</span>
</div>
</div>
<div id="tabbottom">
</div>
<div id="rightsidebottom">
</div>
<div id="footer">
<div id="footerleft">
</div>
<div id="footerright">
</div>
</div>
</div><!-- class wrapper end -->
</body>
</html>
styles.css
Code:
/* CSS Document */
body {
background-color:#8DC1EC;
font-family: verdana, arial, Helvetica, sans-serif;
font-size: 12px;
color: #6F6F6F;
font-style: normal;
text-decoration: none;
margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
text-align:center; /* Hack for IE5/Win */
}
/* CSS Layout! */
#wrapper {
width: 983px;
margin: 0px auto; /* Right and left margin widths set to "auto" */
text-align: left; /* Counteract to IE5/Win Hack */
padding: 0px;
border: none;
background-color: #8DC1EC;
}
#warningstriptop {
background-image: url(../images/warningstriptop.gif);
width: 753px;
height: 19px;
float: left;
}
#warningstripbottom {
background-image: url(../images/warningstripbottom.gif);
width: 753px;
height: 18px;
float: left;
}
#toptabtop {
background-image: url(../images/toptabtop.gif);
width: 230px;
height: 19px;
float: right;
}
#toptabmiddle {
background-image: url(../images/toptabmiddle.gif);
width: 230px;
height: 168px;
float: right;
overflow: hidden;
}
#mainbody {
background-image: url(../images/mainbody.gif);
background-repeat:repeat;
width: 718px;
min-height: 781px;
float: left;
padding-right: 20px;
padding-left: 15px;
}
#tabtop {
background-image: url(../images/tabtop.gif);
width: 230px;
height: 19px;
float: right;
}
#tabbody {
background-image: url(../images/tabbody.gif);
width: 230px;
height: 168px;
float: right;
overflow: hidden;
}
#tabbottom {
background-image: url(../images/tabbottom.gif);
width: 230px;
height: 19px;
float: right;
}
#tab {
margin-left: 30px;
width: 185px;
overflow:hidden;
}
#rightsidebottom {
background-image: url(../images/news_r5_c4.jpg);
float: right;
height: 200px;
width: 230px;
}
#footer {
height: 38px;
width: 983px;
float: left;
}
#footerleft {
background-image: url(../images/news_r7_c2.jpg);
height: 38px;
width: 753px;
float: left;
}
#footerright {
background-image: url(../images/news_r7_c4.jpg);
height: 38px;
width: 27px;
float: left;
}