By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,317 Members | 1,313 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,317 IT Pros & Developers. It's quick & easy.

Menu bar Div causing contents to 'drop' below menu in IE

P: 1

Browser(s): tested in FF3.01 (XP) and IE 7 (XP) - however problem reported in all versions of IE (none in FF)

Problem: I have a simple CSS/php site with a left menu div and some central content divs (no right hand menu) - however in IE the content always drops below the menu. This does not happen in FF (3) but I have not tested it against other browsers. The site has been written in spare time for a friend for free - there is therefore nothing clever about the site so please don't laugh - thanks :)
I have tried various changes (and HTML tidy) but not found any real problems - I am sure it must be something simple but to be honest CSS/HTML is not my thing (I am a server side Java dev by trade!) so a little confused. Any help much appreciated?


<div class="menubox">
<a href="gallery/gallery.php">Gallery</a>
<hr />
<a href="glazetech.php?pageid=1">Glaze Tech</a>
<hr />
<a href="stockists.php">Stockists</a>
<hr />
<a href="contact.php">Contact</a>
<hr />
<a href="statement.php">Statement</a>
<hr />
<a href="links.php">Links</a>
<hr />
<a href="resume.php" >Resume</a>
<hr />
menubox {
float: left;
width: 8em;
padding:0px 10px 0px 30px;
margin-left: 20px;
border-left: 1px solid black;

Sep 16 '08 #1
Share this Question
Share on Google+
1 Reply

Expert 100+
P: 397
I think maybe you have a sort of over built construct. Keep it simple. Make a big box. Put smaller boxes in it. BTW, search engines can't read images so using text may be a better way to go than setting text as an image. Hold at least +2 font scaling in compliant browsers; and, in the IEs hold text-size largest. The floats should not drop at those settings. The IEs need a little horizontal play-- too tight horizontal tolerance will cause float drop. Validate the markup and CSS as you work.!

Maybe this simple example will help (I'd remove the image text that's in the large photo if it were mine) [1]. The xml declaration above the doctype puts Win/IE/6.0 and down in quirksmode-- making it easier to cope with those browsers.

Cursory checked in IE/7.0, IE/6.0, IE/5.5, IE/5.01, and Mac/IE/5.2-- and in compliant Mac browsers (FF, Camino, Safari, and Opera).
Jon Bull Ceramics
Sep 16 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.