SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
-
Oct 12, 2006, 14:18 #1
- 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...
-
Oct 12, 2006, 14:51 #2
- 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>
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>
That should solve your problem hopefully
-
Oct 12, 2006, 15:53 #3
- 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.
-
Oct 13, 2006, 01:29 #4
- 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.
-
Oct 13, 2006, 02:13 #5
- 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); }
Code:<div> <div id="top"> </div> <div id="middle"> <br /> </div> <div id="bottom"></div> </div>
-
Oct 13, 2006, 12:11 #6
- Join Date
- Dec 2005
- Posts
- 9
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Stormrider
As long as it's easier for me and conforms to XHTML 1.1 then I think it's ok.
-
Oct 13, 2006, 12:15 #7
- 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.
Originally Posted by csswiz
Bookmarks