Rommeo Posted November 14, 2009 Share Posted November 14, 2009 There is additional spaces ( gaps ) in my left menu. if you check the picture; http://tinypic.com/r/zvdc15/4 There is a space between hotels & beaches & Education. Can you please help me to clear these spaces ?. I want it to be look like firefox when I m running it on internet explorer. Thanks. my css : #button { width: 175px; padding: 0; font-family: Geneva, Arial, Helvetica, sans-serif; font-size : 12px; background-color: #FFFFFF; color: #333; font-weight: bold; margin: 0px; } #button ul { list-style: none; margin: 0; padding: 0; border: none; width: 175px; } #button li { border-bottom: 1px solid #90bade; margin: 0; list-style: none; list-style-image: none; padding: 0px; } #button img { border: 0px; } #button li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #3366cc; color: #fff; text-decoration: none; width: 100%; } html>body #button li a { width: auto; } #button li a:hover { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; } #button li #active { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; } .leftmenusmall { font-size: 10px; margin: 0px; padding: 0px; list-style: none; list-style-image: none; } My html : <body> <div id="button"> <ul> <li><a href="Home.html">Tourism</a></li> <li class="leftmenusmall"><a href="Home.html">Hotels</a></li> <li class="leftmenusmall"><a href="Home.html">Beaches</a></li> <li><a href="Home.html">Education</a></li> </ul> </div> </body> Link to comment https://forums.phpfreaks.com/topic/181545-ie-problem-why-the-additional-spaces/ Share on other sites More sharing options...
Rommeo Posted November 15, 2009 Author Share Posted November 15, 2009 Forget to post my leftmenusmallclass is as follows : .leftmenusmall { font-size: 10px; margin: 0px; padding: 0px; list-style: none; list-style-image: none; } Link to comment https://forums.phpfreaks.com/topic/181545-ie-problem-why-the-additional-spaces/#findComment-957722 Share on other sites More sharing options...
Rommeo Posted November 16, 2009 Author Share Posted November 16, 2009 Can someone please help ? what can cause this ? Link to comment https://forums.phpfreaks.com/topic/181545-ie-problem-why-the-additional-spaces/#findComment-958405 Share on other sites More sharing options...
JustLikeIcarus Posted November 16, 2009 Share Posted November 16, 2009 Your different font size in .leftmenusmall is throwing off the padding of the element. Gotta love i.e. Link to comment https://forums.phpfreaks.com/topic/181545-ie-problem-why-the-additional-spaces/#findComment-958449 Share on other sites More sharing options...
Rommeo Posted November 16, 2009 Author Share Posted November 16, 2009 Your different font size in .leftmenusmall is throwing off the padding of the element. Gotta love i.e. I have noticed it.. So how can I solve it ? Link to comment https://forums.phpfreaks.com/topic/181545-ie-problem-why-the-additional-spaces/#findComment-958464 Share on other sites More sharing options...
JustLikeIcarus Posted November 16, 2009 Share Posted November 16, 2009 replace your opening "<html>" tag with: <!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"> Should take care of it. I tested it and it appeared fine. Link to comment https://forums.phpfreaks.com/topic/181545-ie-problem-why-the-additional-spaces/#findComment-958477 Share on other sites More sharing options...
Rommeo Posted November 16, 2009 Author Share Posted November 16, 2009 Sorry to say that it didn't work.. Maybe it's because we're running different versions of IE. Is there any css based solution ? Link to comment https://forums.phpfreaks.com/topic/181545-ie-problem-why-the-additional-spaces/#findComment-958623 Share on other sites More sharing options...
JustLikeIcarus Posted November 16, 2009 Share Posted November 16, 2009 Well I would first try some different doctypes because im thinking that ie is going into quirks mode and thats causing you the issue. However if you cant get one that works. Maybe try <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <html> Seeing as your code appears correct I checked it against the A List Apart article for that code. You shouldnt have to mess with more of the CSS however if you do then you will just have to compensate by adjusting the padding of the elements with the smaller font. Also take a look at this version of that menu. http://css.maxdesign.com.au/listamatic/vertical10.htm Link to comment https://forums.phpfreaks.com/topic/181545-ie-problem-why-the-additional-spaces/#findComment-958645 Share on other sites More sharing options...
haku Posted November 17, 2009 Share Posted November 17, 2009 Without a proper doctype, it will be very hard/near impossible to achieve cross-browser consistency. Link to comment https://forums.phpfreaks.com/topic/181545-ie-problem-why-the-additional-spaces/#findComment-958809 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.