im working on a website for my university assignment. and im getting some strange problems.
the site displays fine in Firefox but i have problems in IE 6.0.
<!-- m --><a class="postlink" href="http://knowj.com/Student/Assignment2/">http://knowj.com/Student/Assignment2/</a><!-- m -->
as you will be able to see when the page is maximised in IE the last link <div class="pos-link1> wraps to below the 1st one as as you resize the browser window it jumps from inline to below. theres 5 boxes all set to 20% = 100% of the pos-main div tag. i cant see any problem within the code and neither can my lecturer. where is it getting the extra % from to drop the box down.
also the pos-main div tag layer wont extent to 90% of the browser window only it only extends to the height of the content
thanks in advance
body
{
background-color:#333333;
margin-top:0;
margin-left:0;
margin-right:0;
margin-bottom:0;
}
.pos-main
{
position:relative;
padding:0;
border:0;
left:5%;
top:1%;
width:90%;
height:90%;
background-color:#000000;
}
.pos-banner
{
position:relative;
padding:0;
border:0;
blackground-color:#000000;
width:100%;
height:150px:
}
.pos-link1
{
position:relative;
padding:0;
border:0;
left:0;
width:20%;
height:30px;
float:left;
background-color:#8E0707;
text-align: center;
vertical-align: middle;
}
.pos-link2
{
position:relative;
padding:0;
border:0;
left:0;
width:20%;
height:30px;
float:left;
background-color:#000000;
text-align: center;
vertical-align: middle;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dj Tiesto Unofficial - Assignment 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href=http://www.webdeveloper.com/forum/archive/index.php/"Style/style.css" rel="stylesheet" type="text/css">
</head>
<!--start if visable page content -->
<body>
<!--main tabe to contain page content-->
<div class="pos-main">
<!--banner-->
<div >
<img src=http://www.webdeveloper.com/forum/archive/index.php/"Images/bg_banner.jpg" alt="tiesto unoffical, website banner">
</div>
<!-- links -->
<div class="pos-link1"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">link1</a></div>
<div class="pos-link2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">link2</a></div>
<div class="pos-link1"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">link3</a></div>
<div class="pos-link2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">link4</a></div>
<div class="pos-link1"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">link5</a></div>
<!-- main content left -->
<div>
<h1>left</h1>
<p>left column information</p>
</div>
<!-- main content right -->
<div>
<h1>right</h1>
<p>right column information</p>
</div>
</div>
</body>
</html>Your problems stem from two things: 50% + 50% does not always equal 100% (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&postid=203735#post203735">http://www.webdeveloper.com/forum/showt ... post203735</a><!-- m -->) and the one pixel rounding error (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/round-error.html">http://www.positioniseverything.net/round-error.html</a><!-- m -->).
"In Search of Sunrise, Vol. 3" is my favorite Tiesto album, by the way
In your case, since the menu items are a set height, use absolute positioning instead of floating the DIVs.wont i need to use a separte css rule for each div link tag then?
thanks btwYou're still not understanding the problem. The arrangement of style rules isn't the issue. It's that you're giving block elements percentage widths. The browser is rounding partial pixels up and making one of your menu items too long to fit in its containing block. Remember. You're not working with tables. Be sure to read the forum post I linked to above. That explains your layout woes.
You simply cannot size block elements using percentages and expect them to remain next to each other in all browsers in all screen resolutions. In your case, you can use absolute positioning because you know how high each menu item is since you set the height to 30px in your CSS file.
the site displays fine in Firefox but i have problems in IE 6.0.
<!-- m --><a class="postlink" href="http://knowj.com/Student/Assignment2/">http://knowj.com/Student/Assignment2/</a><!-- m -->
as you will be able to see when the page is maximised in IE the last link <div class="pos-link1> wraps to below the 1st one as as you resize the browser window it jumps from inline to below. theres 5 boxes all set to 20% = 100% of the pos-main div tag. i cant see any problem within the code and neither can my lecturer. where is it getting the extra % from to drop the box down.
also the pos-main div tag layer wont extent to 90% of the browser window only it only extends to the height of the content
thanks in advance
body
{
background-color:#333333;
margin-top:0;
margin-left:0;
margin-right:0;
margin-bottom:0;
}
.pos-main
{
position:relative;
padding:0;
border:0;
left:5%;
top:1%;
width:90%;
height:90%;
background-color:#000000;
}
.pos-banner
{
position:relative;
padding:0;
border:0;
blackground-color:#000000;
width:100%;
height:150px:
}
.pos-link1
{
position:relative;
padding:0;
border:0;
left:0;
width:20%;
height:30px;
float:left;
background-color:#8E0707;
text-align: center;
vertical-align: middle;
}
.pos-link2
{
position:relative;
padding:0;
border:0;
left:0;
width:20%;
height:30px;
float:left;
background-color:#000000;
text-align: center;
vertical-align: middle;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dj Tiesto Unofficial - Assignment 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href=http://www.webdeveloper.com/forum/archive/index.php/"Style/style.css" rel="stylesheet" type="text/css">
</head>
<!--start if visable page content -->
<body>
<!--main tabe to contain page content-->
<div class="pos-main">
<!--banner-->
<div >
<img src=http://www.webdeveloper.com/forum/archive/index.php/"Images/bg_banner.jpg" alt="tiesto unoffical, website banner">
</div>
<!-- links -->
<div class="pos-link1"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">link1</a></div>
<div class="pos-link2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">link2</a></div>
<div class="pos-link1"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">link3</a></div>
<div class="pos-link2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">link4</a></div>
<div class="pos-link1"><a href=http://www.webdeveloper.com/forum/archive/index.php/"">link5</a></div>
<!-- main content left -->
<div>
<h1>left</h1>
<p>left column information</p>
</div>
<!-- main content right -->
<div>
<h1>right</h1>
<p>right column information</p>
</div>
</div>
</body>
</html>Your problems stem from two things: 50% + 50% does not always equal 100% (<!-- m --><a class="postlink" href="http://www.webdeveloper.com/forum/showthread.php?s=&postid=203735#post203735">http://www.webdeveloper.com/forum/showt ... post203735</a><!-- m -->) and the one pixel rounding error (<!-- m --><a class="postlink" href="http://www.positioniseverything.net/round-error.html">http://www.positioniseverything.net/round-error.html</a><!-- m -->).
"In Search of Sunrise, Vol. 3" is my favorite Tiesto album, by the way
In your case, since the menu items are a set height, use absolute positioning instead of floating the DIVs.wont i need to use a separte css rule for each div link tag then?
thanks btwYou're still not understanding the problem. The arrangement of style rules isn't the issue. It's that you're giving block elements percentage widths. The browser is rounding partial pixels up and making one of your menu items too long to fit in its containing block. Remember. You're not working with tables. Be sure to read the forum post I linked to above. That explains your layout woes.
You simply cannot size block elements using percentages and expect them to remain next to each other in all browsers in all screen resolutions. In your case, you can use absolute positioning because you know how high each menu item is since you set the height to 30px in your CSS file.