SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Dec 2005
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can someone please explain this phenomenon?

    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...

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    SitePoint Member
    Join Date
    Dec 2005
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Wizard silver trophybronze trophy Stormrider's Avatar
    Join Date
    Sep 2006
    Location
    Nottingham, UK
    Posts
    3,133
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Member
    Join Date
    Dec 2005
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote 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.

  6. #6
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  7. #7
    SitePoint Member
    Join Date
    Dec 2005
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


    Quote 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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •