20 replies [Last post]
danursuline
Offline
Regular
Last seen: 15 years 42 weeks ago
Joined: 2005-06-27
Posts: 24
Points: 0

Ok so heres the deal -- I am having a problem lining up some graphics... here is the links:

http://www.webphasellc.com/loop/index.html
http://www.webphasellc.com/loop/css/basic.css

so it looks fine in FireFox, But IE puts a 10pixel space in the middle of my layout... I can remove it by added a -10px margin on the contenthead, but then it obviously doesnt look correct in Firefox...

Phrozt
Phrozt's picture
Offline
Regular
Last seen: 18 years 20 weeks ago
Joined: 2004-07-08
Posts: 39
Points: 0

OK I know its a bug with IE, but cant seem to fix it :)

first of all, you don't have a vaild doctype. It's a common mistake, but you don't actually tell the browser what standards you are using. You need to include the link to the standards doc. The correct doc-type tag for you is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

another thing, IE puts a margin at the top of a ul, so make sure you set the margin (or at least margin-top) to 0.

Finally, if those don't work, you can always use the IE-specific seletor to target the proble:

* html #sidemenu ul

danursuline
Offline
Regular
Last seen: 15 years 42 weeks ago
Joined: 2005-06-27
Posts: 24
Points: 0

hrmm.. changing the doctype really made things messy in IE..

Changing the doc type made things really mess up in IE, everything looks great in FF... I set the margins to 0 and no change... any suggestions...

here is the new updated version with updated doc type, and magin changes

http://www.webphasellc.com/loop/new/loop.html
http://www.webphasellc.com/loop/new/css/basic.css

hrmm any suggestions??

Phrozt
Phrozt's picture
Offline
Regular
Last seen: 18 years 20 weeks ago
Joined: 2004-07-08
Posts: 39
Points: 0

OK I know its a bug with IE, but cant seem to fix it :)

several things:

you have to count padding pixels as part of the width. i.e.:
width: 145;
padding: 0px 10px 0px 10px;

= width 165.

Therefore, you ahve to adjust accordingly. I scaled your width down. Another thing, the shorthand "width: 0 15px;" is kinda jenky because you don't have px after 0 and not all browsers like shorthand. There were several places where I condensed your background code (I didn't check all places). For your header, you had width: 100% for the part w/the text in it.. that was pushing it down to another line (in i.e.), which created the space, and put it at the bottom. You'll notice one thing that I did was add a lot of borders. Go ahead and take those out when you are ready to put this thing up, of course, but I wanted to leave them up for you to show you what a good troubleshooting tool they are. It's really easy to see which elements are doing what when you have a border around it.

here's the modified code:

html, body{ margin: 0; padding:0; }
#pagewidth{ width:643px; min-width: 500px; max-width: 1000px; margin: 0; padding: 0; }
#header { background-image: url(../images/header_bg.jpg); height: 96px; }
#textlogo { display: none; }#logo { font-family: Georgia, "Times New Roman", Times, serif; float: left; background-image: none; background-repeat:no-repeat; background-position: 4px 4px; width: 230px; height: 78px; margin-top: 4px; margin-left: 4px; }

#topgraphic { background-image: none; background-repeat: no-repeat; width: 380px; height: 60px; float: right; }
#topnav { width: 100%; color: black; font-size: 24px; font-family: Georgia, "Times New Roman", Times, serif; font-weight: 700; background-image: url(../images/topnav_bg.jpg); background-repeat: no-repeat; background-position: 0 0; text-align: center; height: 33px; }
#menu a { color: black; font-size: 12px; font-weight: bold; vertical-align: middle; }
#menu a:hover { color: #009; font-size: 12px; }
#navgraphic { background-image: url(../images/bottom_nav_shadow.jpg); background-repeat: repeat-x; height: 10px; }

#contenthead { 
	vertical-align: middle; 
	height: 55px; 
	border: 1px solid red;
}

#pagehead { 
	width: auto;
	font-weight: bold; 
	font-size: 125%; 
	text-align: center; 
	border: 1px solid green;
}

#phLTgraphic { 
	float: left; 
	background: url(../images/phLTgraphic.jpg) no-repeat; 
	width: 145px; 
	height: 55px; 
	border: 1px dotted blue;
}

#midcontent { width: 100%; height: 100%; min-height: 500px; }

#sidemenu { width: 145px; height: 341px; background-image: url(../images/left_menu.jpg); background-repeat: no-repeat; float: left; }
#sidemenu ul { position: relative; top: 0; right: 30px; margin-top: 0; list-style-image: none; list-style-position: outside; }
#sidemenu li { background-color: #d5b0e3; margin-bottom: 12px; width: 114px; height: 16px; border: solid 1px #464b52; padding-left: 4px; }
#sidemenu a { display: block; width: 100%; font-size: 93%; color: #000; font-family: Georgia, "Times New Roman", Times, serif; font-weight: bold; text-decoration: none; }
#sidemenu a:hover { color: #009; }

#content { 
	background-image: #fff;
	max-width:550px;
	min-height: 500px;
	padding: 0px 15px 0px 15px;
	text-align: left;
	width: 437px;
	float: right;
	border: 1px solid blue;
}

#contentpic { position: relative; float: right; right: -25px; bottom: -15px; padding: 8px; }
@media print {
	/*hide the left column when printing*/
	#textlogo { font-size: large; font-weight: 700; display: inline; }
	#topnav { display: none; }
	#phLTgraphic { display: none; }
	#content { background-color: #fff; background-image: none; background-repeat: repeat-y; text-align: left; padding: 0 15px; width: 100%; min-height: 500px; max-width: 550px; float: right; }
	#sidemenu { display: none; }
	#leftcol{display:none;}
	#outer{border-left:0;}
	/*hide the right column when printing*/
	#rightcol{display:none;}
	#outer{border-right:0;}
}

danursuline
Offline
Regular
Last seen: 15 years 42 weeks ago
Joined: 2005-06-27
Posts: 24
Points: 0

OK -- a little closer, but still issues...

Ok I know what your talking about, and have used your css fixes, adding the borders to check formating worked great in IE but messed up FF soo I removed all but what was around the content text... Ok but I still have that gap in the middle of my layout in Internet explorer... this was the original issue, that I am confused on, and I know I had some other issues at first, but all looks ok now...

here is the latest version:
http://www.webphasellc.com/loop/test2/loop.html
http://www.webphasellc.com/loop/test2/css/basic.css

I someone can enlighten me Smile

danursuline
Offline
Regular
Last seen: 15 years 42 weeks ago
Joined: 2005-06-27
Posts: 24
Points: 0

I think I found the problem...

Ok i think I found the problem, but have not read about it anywhere.. Internet Explorer doesnt seem to like heights that are less than 20px. If I make a height of 10px it (IE) makes it 20px if I make it 15px it makes it 20px. this is a pain in the BUTT, I mean I can just redo my grpahics and make sure that my layout grapics do not have a height of less than 10px. has anyone heard of this?

FYI all heights seem to work fine in firefox... :!: :!:

danursuline
Offline
Regular
Last seen: 15 years 42 weeks ago
Joined: 2005-06-27
Posts: 24
Points: 0

THAT WAS IT ALL ALONG!!!

I can not believe that was it... Im supprised I have not read that issue anywhere... hrmm just for future reference does anyone know if there is a hack so IE will use heights less than 20px?

Anywho thanks to all who helped... This thing was driving me nuts...

Layout fixed:
http://www.webphasellc.com/loop/index.html
http://www.webphasellc.com/loop/css/basic.css

Once agian thanks,

-Dan

Phrozt
Phrozt's picture
Offline
Regular
Last seen: 18 years 20 weeks ago
Joined: 2004-07-08
Posts: 39
Points: 0

OK I know its a bug with IE, but cant seem to fix it :)

heh.. there's got to be another thing you are overlooking, because there's no 20px thing in IE. The only really odd problem that IE has with creating space is if you don't put something directly after an <img> tag. You're site is looking good though... but you should probably mess some more w/padding/margin of some of your elements.

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 13 years 46 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

OK I know its a bug with IE, but cant seem to fix it :)

Phrozt wrote:
Another thing, the shorthand "width: 0 15px;" is kinda jenky because you don't have px after 0 and not all browsers like shorthand.

Phrozt, which browsers reject the '0' without the 'px' following it? I don't think you're right on this. From the books I have read, '0' is the CSS exception when you shouldn't use 'px' or any other value after it; '0' stands alone.

- Antibland

Phrozt
Phrozt's picture
Offline
Regular
Last seen: 18 years 20 weeks ago
Joined: 2004-07-08
Posts: 39
Points: 0

OK I know its a bug with IE, but cant seem to fix it :)

perhaps I may be wrong on insisting the px may be there... but I don't see what it would hurt.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 39 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

OK I know its a bug with IE, but cant seem to fix it :)

I agree with antibland, I've never read anywhere you need a unit on a zero, but I have read the opposite. The unit is meaningless. 0px = 0em = 0pt = 0en =0ex = 0% = 0.
The other thing is - which browsers don't like shorthand? It turns out some prefer shorthand. As Hugo will attest, this is especially true of the background property. The only exception I can think of is the margin property, but this is only IE5/Mac on tables.

Phrozt
Phrozt's picture
Offline
Regular
Last seen: 18 years 20 weeks ago
Joined: 2004-07-08
Posts: 39
Points: 0

OK I know its a bug with IE, but cant seem to fix it :)

there is a difference between the shorthand I mentioned and a general property declaration as you mentioned.

you can define a whole property family by a general declarations (i.e. font, background, margin, border, etc). Shorthand w/in a general declaration is not accepted by all browsers, as mentioned here:
http://www.webmasterworld.com/forum83/6476.htm

(look at createErrorMsg's comment)

There's nothing wrong w/using standard accepted shorthand.. but it's best to stick w/the standards.. simply to avoid small problems w/retarded browsers *cough* macIE *cough*.

I really don't see how your debate helps the author of this thread, however.

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 13 years 46 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

OK I know its a bug with IE, but cant seem to fix it :)

Phrozt wrote:
I really don't see how your debate helps the author of this thread, however.

It helps the author of this thread by pointing out information that is inaccurate or slightly misguided. Including those extra 'px' characters adds extra, unnecessary bandwidth costs. Yes, I understand that a few characters here and there don't seemingly add much bandwidth cost. But consider those small amounts over weeks, months, and eventually years. The bottom line is that it's bad practice to use the extra 'px' and therefore my (or anyone's) comment applies to any thread encouraging the use of this bad practice.

- Antibland

Phrozt
Phrozt's picture
Offline
Regular
Last seen: 18 years 20 weeks ago
Joined: 2004-07-08
Posts: 39
Points: 0

OK I know its a bug with IE, but cant seem to fix it :)

I don't see how it's bad practice. I admit that I cannot tell you where it says to use px, but I'd like to see a place that says it's "bad practice" to do so.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

OK I know its a bug with IE, but cant seem to fix it :)

Phrozt it's generally meaningless to state a unit for a value that is zero ; zero px, zero % is the same it's nothing; units have no relevance and as pointed out to include them is just extra clutter but your right it doesn't actually do any harm to state them, but you won't find many that know what they're doing putting them in.

As for the shorthand property it is well known that more often than not the shorthand property is better supported as in the use of background rather than background-image or background-color , I'm not sure what you mean by this statement:

"you can define a whole property family by a general declarations (i.e. font, background, margin, border, etc). Shorthand w/in a general declaration is not accepted by all browsers, as mentioned here:"

The reference you make to "General Properties" are shorthand declarations, I'm not clear on what you mean by shorthand within a general declaration, but maybe I'm missing something.

Apologies to danursuline for taking your post slightly Off Topic,
but it's important that when advise is given that it's as accurate as possible and any regular member should offer corrections where needed and that goes for errors or omissions made by any of us and no offence should be taken by them as it ensures the best possible advise be given in answer to the question.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

danursuline
Offline
Regular
Last seen: 15 years 42 weeks ago
Joined: 2005-06-27
Posts: 24
Points: 0

Not a problem...but see if you can figure this out..

Ok here is the old version and the new version of the site...

Old version:
http://www.webphasellc.com/loop/test2/loop.html
http://www.webphasellc.com/loop/test2/css/basic.css

new version:
http://www.webphasellc.com/loop/index.html
http://www.webphasellc.com/loop/css/basic.css

The difference:

Old version :
#phLTgraphic is 55px high
#contenthead is 55px high
#navgraphic is 10px high

new version:
#phLTgraphic is 45px high
#contenthead is 45px high
#navgraphic is 20px high

I had to resize the graphics appropriatly...

But why does only the one with the height of 20px line up correctly?? When the height is at 10px IE 6 still makes the area 20px high??!! obviously I worked around this in the later version by re-creating my graphics, but why is it doing this, (both look fine in FF)... Thanks in advance.... :?:

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

OK I know its a bug with IE, but cant seem to fix it :)

Most likely line-height. IE doesn't like making things smaller than line-height, so try setting the line-height to 10px or less.

danursuline
Offline
Regular
Last seen: 15 years 42 weeks ago
Joined: 2005-06-27
Posts: 24
Points: 0

Still doesnt seem to like things smaller than 10px high

Chris..S wrote:
Most likely line-height. IE doesn't like making things smaller than line-height, so try setting the line-height to 10px or less.

Tried that as well.. no go -- Ohh well I found another way to get the same look soo I will just go with it.. Thanks for all the help Smile

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

OK I know its a bug with IE, but cant seem to fix it :)

Well if its not line-height, its definitely font-size.

Smile

and I tested it this time, it is font-size, set it to 8px or below and the white space will vanish.

danursuline
Offline
Regular
Last seen: 15 years 42 weeks ago
Joined: 2005-06-27
Posts: 24
Points: 0

Thanks :)

Chris..S wrote:
Well if its not line-height, its definitely font-size.

Smile

and I tested it this time, it is font-size, set it to 8px or below and the white space will vanish.

After much ado its all good -- thanks Chris

Phrozt
Phrozt's picture
Offline
Regular
Last seen: 18 years 20 weeks ago
Joined: 2004-07-08
Posts: 39
Points: 0

OK I know its a bug with IE, but cant seem to fix it :)

dan.. plz set a body background color. I have a different color set on my comp at home, and that was the first thing I noticed heh. It's amazing how few sites that have a "white" background actually set their background to white. Yahoo doesn't even do that.