murfitUK Posted November 18, 2007 Share Posted November 18, 2007 It does what I want if firefox - but too much space in IE6.Using an unordered list in the left column containing links which are set to look like buttons. Here's a couple of pictures to show what I mean:Firefox - looks OKhttp://homepage.ntlworld.com/murfituk/ff.JPGIE6 - too much spacehttp://homepage.ntlworld.com/murfituk/ie6.JPGAny suggestions how I can fix it? (The background is usually white - I've just made it red here so it stands out.) The CSS for this bit is:#leftcolumn { float: left; width: 190px; margin-left: -100%; background-color: #FF0000; }#leftcolumn ul { list-style-type: none; padding: 0; margin: 0; }#leftcolumn ul li { margin-top: 4px; }#leftcolumn ul li a { display: block; padding: 3px 0px 3px 0px; text-decoration: none; text-align: center; border: 1px solid #0000FF; color: #FFFFFF; background-color: #336699; }#leftcolumn ul li a:hover { background-color: #FFFFFF; color: #336699; } Link to comment Share on other sites More sharing options...
croatiankid Posted November 18, 2007 Share Posted November 18, 2007 This could be part of the solution. Try changing #leftcolumn {float: left;width: 190px;margin-left: -100%;background-color: #FF0000;} to #leftcolumn {display:inline;float: left;width: 190px;margin-left: -100%;background-color: #FF0000;} This fixes IE's double floated margin bug (IE doubles the horizontal margin of a floated element on the same horizontal side; float:left;margin-left:20px; will give a left margin of 40px in IE). Link to comment Share on other sites More sharing options...
murfitUK Posted November 19, 2007 Author Share Posted November 19, 2007 Thanks for your help. However, the fix doesn't work. I don't think it is the IE double margin bug because the extra space is vertical between the <li> elements and not horizontally.Any other suggestion warmly welcomed! Link to comment Share on other sites More sharing options...
croatiankid Posted November 19, 2007 Share Posted November 19, 2007 Change #leftcolumn ul li {margin-top: 4px;} to #leftcolumn ul li {margin-top: 4px;padding:0} And then adjust using only margins. Or set margin:0; and adjust using only padding. It's a browser inconsistency (one uses padding for LI, other uses margins by default. Get rid of the default by putting it at 0). Link to comment Share on other sites More sharing options...
murfitUK Posted November 19, 2007 Author Share Posted November 19, 2007 Nope. That doesn't work either. I can't remember where I downloaded the css code from but I think I'll look around for another example instead of spending more time on this one.The only other thing I can think of. Does IE have to be in quirk mode or something? The heads I am using at present are:<!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" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />Wonder if trying something else will make difference? Link to comment Share on other sites More sharing options...
Synook Posted November 20, 2007 Share Posted November 20, 2007 Most browsers have Quirks mode, IE included. You could try changing your doctype to strict, but I haven't had a look at the problem so I don't know whether it will help.Also, you could try padding:0px; for the lis and also margin:0px; for #leftcolumn ul li a Link to comment Share on other sites More sharing options...
croatiankid Posted November 20, 2007 Share Posted November 20, 2007 The XHTML trans. doctype with no XML declaration activates standards-compliant mode in the most important browsers. Link to comment Share on other sites More sharing options...
Synook Posted November 20, 2007 Share Posted November 20, 2007 Indeed it does I always thought only strict did that. Link to comment Share on other sites More sharing options...
croatiankid Posted November 20, 2007 Share Posted November 20, 2007 I always use this page (the table that's on it) for reference, I suggest it to anyone that wants to learn about rendering modes. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.