Can someone please explain this phenomenon?

**snapcount** · Oct 12, 2006, 13:18

http://www.ensitconsultancy.co.uk/problem/

Works ok in Internet Explorer, doesn't work ok in Firefox or Opera. It's a very simple HTML I've made as an example. I don't want to use tables or anything, I would like it to work with as little modification as possible.

Thanks...

**DaveWoods** · Oct 12, 2006, 13:51

This should solve your problem in the quickest way

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
	<head>
		<title>Test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
	</head>
	<body style="background-color: #000000;">
		<div>
			<div style="font-size: 0; width: 202px; height: 4px;">
				<img src="sidebar_top.gif" width="202px" height="4px" alt="" />
			</div>
			<div style="background-image: url(sidebar_bgr.gif); width: 202px; background-repeat: repeat-y;">
			<br />
			</div>
			<div style="font-size: 0; width: 202px; height: 4px;">
				<img src="sidebar_bottom.gif" width="202px" height="4px" alt="" />
			</div>
		</div>
	</body>
</html>

However you should really seperate you presentation from your content like so

CSS

Code:

body {
	background-color: #000000;
}
#top {
	font-size: 0;
	width: 202px; 
	height: 4px;
}
#top img {
	width: 202px;
	height: 4px;
}
#middle {
	background-image: url(sidebar_bgr.gif); 
	width: 202px; 
	background-repeat: repeat-y;
}
#bottom {
	font-size: 0; 
	width: 202px; 
	height: 4px;
}
#bottom img {
	width: 202px;
	height: 4px;
}

HTML

Code:

<div>
	<div id="top">
		<img src="sidebar_top.gif" alt="" />
	</div>
	<div id="middle">
	<br />
	</div>
	<div id="bottom">
		<img src="sidebar_bottom.gif" alt="" />
	</div>
</div>

Also please note that it's not the fact that it worked ok in Internet Explorer and didn't in Firefox and Opera, it was that you'd missed some things out of your code which Internet Explorer took a lucky guess at and fixed for you whereas Firefox and Opera were simply doing exactly what you were telling it too

That should solve your problem hopefully

**snapcount** · Oct 12, 2006, 14:53

Thanks for your help csswiz, didn't know about the font-size: 0; thing. It seems a bit silly but what the hell.

I've re-uploaded the example on
http://www.ensitconsultancy.co.uk/problem/ (I've highlighted the bitmaps a bit for clarity) and it's working ok now in Firefox but it's still not working ok in Opera and it has something to do with the small size of the <div>s or images. They're only 4px high but if I use 10px instead, it works ok. Too bad I can't use 10px on the site that I'm making. (EDIT: oh, I actually can! great!)

As for separating the presentation from the content, this piece of HTML would actually go into a PHP file that would just be required() throughout the site, so I didn't see anything wrong with including the styles in the style attribute.

**Stormrider** · Oct 13, 2006, 00:29

It doesn't matter what is generating the content, you still get an HTML file out of it at the end of the day, and should still separate content from style.

**DaveWoods** · Oct 13, 2006, 01:13

The font-size: 0; is used because IE cannot render a height less than what it's base font-size is and therefore you have to put this in to allow you to create a height of 4px.

To be honest, I hadn't checked it in Opera but can see your problem now. You can fix this by making those images background images unless you specifically need them in the page although if they are just decorative images then you really should have them in the CSS.

Seperating content from presentation is the easiest way of working as it keeps all your styling in one place and all your content in another. Therefore it's much easier to maintain and debug if there are any issues with your layout.

It may take a little longer to jump from one file to another when developing but overall it saves me personally a lot of time as I'd much rather be able to see all my styles than be searching through an html document for all the style attributes within a page.

Here's the solution anyway.

CSS

Code:

body {
	background-color: #000000;
}
#top {
	font-size: 0;
	width: 202px; 
	height: 4px;
	background-image: url(sidebar_top.gif);
}
#middle {
	background-image: url(sidebar_bgr.gif); 
	width: 202px; 
}
#bottom {
	font-size: 0; 
	width: 202px; 
	height: 4px;
	background-image: url(sidebar_bottom.gif);
}

HTML

Code:

<div>
	<div id="top">
	</div>
	<div id="middle">
	<br />
	</div>
	<div id="bottom"></div>
</div>

**snapcount** · Oct 13, 2006, 11:11

Originally Posted by Stormrider

It doesn't matter what is generating the content, you still get an HTML file out of it at the end of the day, and should still separate content from style.

I thought that separating content from presentation was to make editing easier. It's honestly easier for me to have styles there where I can edit them quickly, not only in the same file but near the elements that are using them. I of course have separate CSS files for the rest of the site, but this page was a special case - styles are needed only on that page and I don't want them cluttering my super-neat CSS file that has no relevance to that page.

As long as it's easier for me and conforms to XHTML 1.1 then I think it's ok.

**snapcount** · Oct 13, 2006, 11:15

Thanks for your help, it's working great now. There was no problem in MSIE, it rendered an element 4px high with no problems, it was in FF and Opera that it didn't look like I wanted it.

Originally Posted by csswiz

The font-size: 0; is used because IE cannot render a height less than what it's base font-size is and therefore you have to put this in to allow you to create a height of 4px.

To be honest, I hadn't checked it in Opera but can see your problem now. You can fix this by making those images background images unless you specifically need them in the page although if they are just decorative images then you really should have them in the CSS.

Seperating content from presentation is the easiest way of working as it keeps all your styling in one place and all your content in another. Therefore it's much easier to maintain and debug if there are any issues with your layout.

It may take a little longer to jump from one file to another when developing but overall it saves me personally a lot of time as I'd much rather be able to see all my styles than be searching through an html document for all the style attributes within a page.

Here's the solution anyway.

CSS

Code:

body {
	background-color: #000000;
}
#top {
	font-size: 0;
	width: 202px; 
	height: 4px;
	background-image: url(sidebar_top.gif);
}
#middle {
	background-image: url(sidebar_bgr.gif); 
	width: 202px; 
}
#bottom {
	font-size: 0; 
	width: 202px; 
	height: 4px;
	background-image: url(sidebar_bottom.gif);
}

HTML

Code:

<div>
	<div id="top">
	</div>
	<div id="middle">
	<br />
	</div>
	<div id="bottom"></div>
</div>

The SitePoint Forums have moved.

User Tag List

Thread: Can someone please explain this phenomenon?

Thread Tools

Display

Can someone please explain this phenomenon?

Bookmarks

Bookmarks

Posting Permissions