Hey all,
I'm fairly new to the world of CSS so bear with me
I'm experiencing a few problems when designing my site to work with both IE and FF.
I've provided an example of the problems here:
I've shown the source-code below in this post.
The stylesheet is here:
If you view the page through IE everything looks fine. However, in FF the width differ quite a lot and the contents "pane" has been wrapped down below as it's too big to fit into the placeholder (800px).
So, what I'm experiencing here is that, apparently, the padding-style size is automatically subtracted from the total specified width in IE while it's added to the total width in FF (and hence creating such devastating results in the latter browser).
I've been spending hours playing around with the different css-parameters but I really can't make it work in both browsers at the same time (and I'd really like to avoid using two stylesheets). All I want is for the different elements to line up nicely.
So, css-gurus, please help me out here
Huge thanks in advance!
I'm fairly new to the world of CSS so bear with me
I'm experiencing a few problems when designing my site to work with both IE and FF.
I've provided an example of the problems here:
I've shown the source-code below in this post.
The stylesheet is here:
If you view the page through IE everything looks fine. However, in FF the width differ quite a lot and the contents "pane" has been wrapped down below as it's too big to fit into the placeholder (800px).
So, what I'm experiencing here is that, apparently, the padding-style size is automatically subtracted from the total specified width in IE while it's added to the total width in FF (and hence creating such devastating results in the latter browser).
I've been spending hours playing around with the different css-parameters but I really can't make it work in both browsers at the same time (and I'd really like to avoid using two stylesheets). All I want is for the different elements to line up nicely.
So, css-gurus, please help me out here
Huge thanks in advance!
Code:
<body>
<div id="placeholder">
<div id="menubar_top">
<ul>
<li><a href="#">Find hjem hos NCC</a></li>
<li><a href="#">Nyt kontor</a></li>
<li><a href="#">Vi tilbyder</a></li>
<li><a href="#">Sådan arbejder vi</a></li>
<li><a href="#">Om NCC</a></li>
<li><a href="#">Presse</a></li>
<li><a href="#">Job</a></li>
<li><a href="#">In English</a></li>
</ul>
</div>
<div id="top_header"><h1>Foo</h1></div>
<div id="left_menu">
<ul>
<?php
echo '<li><img class="menu_item_pic" src="images/menu_item.gif" alt=""/><a href="#">Deltagerliste</a></li>';
echo '<li><img class="menu_item_pic" src="images/menu_item.gif" alt=""/><a href="?p=2">Projektmappe</a></li>';
if ($p == 2 || $p == 5)
{
echo '<li class="sub_menu"><img class="menu_item_pic" src="images/menu_item.gif" alt=""/><a href="?p=5">Tidsplan</a></li>';
echo '<li class="sub_menu"><img class="menu_item_pic" src="images/menu_item.gif" alt=""/><a href="#">Tegninger</a></li>';
echo '<li class="sub_menu"><img class="menu_item_pic" src="images/menu_item.gif" alt=""/><a href="#">Samarbejdspartnere</a></li>';
echo '<li class="sub_menu"><img class="menu_item_pic" src="images/menu_item.gif" alt=""/><a href="#">Diverse</a></li>';
}
echo '<li><img class="menu_item_pic" src="images/menu_item.gif" alt=""/><a href="#">Mødereferater</a></li>';
echo '<li><img class="menu_item_pic" src="images/menu_item.gif" alt=""/><a href="#">Meddelelser</a></li>';
echo '<li><img class="menu_item_pic" src="images/menu_item.gif" alt=""/><a href="#">Min Profil</a></li>';
?>
</ul>
</div>
<div id="content">
Bleh Blah Bluh
</div>
</div>
</body>![[banghead]](/data/assets/smilies/banghead.gif "[banghead] [banghead]")