Problem with CSS in XHTML - IE vs FireFox [Archive]

View Full Version : Problem with CSS in XHTML - IE vs FireFox

redsox9

02-24-2006, 07:18 PM

Hi, everyone:

I'm new to programming with PHP and XHTML and, understanding that tables are frowned upon in these areas, am trying to work with DIV elements for the first time. I seem to be having an issue with background colors. If you check out this link:

http://www.fenwayfanatics.com/header.html

You will see that, in IE, the header background is green across the width of the browser. However, in FireFox, it gets chopped in the middle. Any possible solutions? FYI, I have the CSS style code embedded in the <head> section.

[Note to administrators: I actually had a few posts when the forum originally began but, for some reason, my account disappeared - weird!]

Your help is appreciated! :)

macgyver2

02-24-2006, 10:00 PM

You floated both the divs (hl and hr) that make up your header. The outer div (id="hm") has nothing to contain and so has no height. In FF (and Safari) that gives you a blank space in between the two header sections if the window is wider than the combined with of the two sections. I believe this is how things are supposed to work (someone correct me if I'm mistaken). A fix would be to also float the outer div.

redsox9

02-25-2006, 06:23 PM

Hi, Eric:

I didn't quite follow your first suggestion, but I tried your second solution - floating the outer div - and that seemed to solve the problem. Thanks!

However, is this good practice? I guess my biggest problem is that, as I stated before, I'm new to using the DIV element after being practiced for so long with the TABLE element. Sometimes it seems like a challenge to get two DIV sections to sit next to each other without the "float" call-out.

I've noticed that the SPAN element seems to help create a TABLE-like structure but even that seems to showcase some irregularities between IE and FireFox. Such is learning a new trick, I suppose...

JoeP

02-26-2006, 08:50 AM

IE is notoriously non-compliant with CSS from what I have read. Here are a few links that I've found useful:

http://webhost.bridgew.edu/etribou/layouts/index.html
http://www.thenoodleincident.com/tutorials/box_lesson/
http://glish.com/css/
http://dean.edwards.name/IE7/

Also, check out Eric Meyers books on CSS as well as the Worx book on beginning CSS.

Good luck!
joe

redsox9

02-26-2006, 10:04 AM

Hi, JoeP:

Thanks for the links. I checked out a couple of them and they seemed to offer some useful information. I'm sure it's just a matter of hitting your head on the screen until it works right. :D

BrandonK

02-27-2006, 07:47 AM

[Note to administrators: I actually had a few posts when the forum originally began but, for some reason, my account disappeared - weird!]

You're not a redsox fan by any chance are you?...lmao.

Yeah the forum was erased and we started over. I'm not exactly sure why. I have a horrible memory but welcome back. :)

redsox9

02-27-2006, 12:08 PM

You're not a redsox fan by any chance are you?...lmao.

Yeah the forum was erased and we started over. I'm not exactly sure why. I have a horrible memory but welcome back. :)
OMG, how did you know? :)

Thanks for the 411... I had a feeling that something happened. Nothing that I had posted before was earth-shattering and it was very easy to add myself again. Appreciate this added feature to my service - bluehost has been a good investment for my site! Plus, how can I go wrong when one of the moderators is a Red Sox fan? :D

JCsDesignz

03-02-2006, 01:39 PM

redsox9

03-02-2006, 06:45 PM

I use Wp which is css,php & xhtml based but i have still managed to get it so its working in all browsers including the dreaded IE LOL

I say put IE in the bin ;)

I found the follow sites extremely helpful.

http://www.lissaexplains.com/
http://validator.w3.org/

Hi, JCsDesignz:

Thanks for the tips! Actually, I have used the second one to help clean up the code on the site that I am developing and it has done a great job. Plus, I'm getting more versed in what works and what is a losing battle.

I completely agree with your assessment about tossing aside IE. However, even though my stats show that FireFox is gaining in popularity, around 75-80% of the people visiting my site use IE, so I need to be sure that at least those people are happy. ;)

Thanks again!

macgyver2

03-02-2006, 07:06 PM

It's a catch-22. :) 75-80% of the folks visiting your (or any) site use IE, so you have to cater to them. Yet if everyone caters to them and make sites that function correctly with that piece of garbage browser, the general population will have no reason to switch. Of course, I haven't really paid attention to what people say IE7 is supposed to be like. Maybe MS will shock us and actually make it a decent, easy-to-work with browser. Hey, it's possible.

At work, I have it worse than you do. If you have a page (or even your whole site) that you don't want to make work with IE, you don't have to. I on the other hand work for the government...if even one taxpayer can't access our site for whatever reason it's not acceptable, as the taxpayers are our bosses. :) We even have to at least think about supporting Netscape 4.7!

By the way redsox9, you have an excellent site! I'm not a baseball fan, but I know some, and two of them are diehard Red Sox faithful. I think they'll really like your site.

redsox9

03-02-2006, 07:44 PM

It's a catch-22. 75-80% of the folks visiting your (or any) site use IE, so you have to cater to them. Yet if everyone caters to them and make sites that function correctly with that piece of garbage browser, the general population will have no reason to switch. Of course, I haven't really paid attention to what people say IE7 is supposed to be like. Maybe MS will shock us and actually make it a decent, easy-to-work with browser. Hey, it's possible.

I agree that it makes life somewhat difficult although I would also add that, less than a year ago, the ratio was something like 90% using IE and then the rest scattered between FireFox, Netscape, Opera, and a few other choices. Now FireFox viewership has jumped to around 15-20%. My guess is that, given time and a continued push by people who know, FireFox will gain back the edge that Netscape used to enjoy over IE.

... and if you truly believe that IE7 will be much improved over its predecessors, then I have some oceanfront property in Kansas that I'd like to sell to you. :D

At work, I have it worse than you do. If you have a page (or even your whole site) that you don't want to make work with IE, you don't have to. I on the other hand work for the government...if even one taxpayer can't access our site for whatever reason it's not acceptable, as the taxpayers are our bosses. We even have to at least think about supporting Netscape 4.7!

Well, as I posted on another thread, I still feel strongly that you need to cater to as much of your readership as possible. Yes, I could tell IE users to cram it with walnuts, but I won't easily sway them to make the switch that way. IMO, the best way to do this is to continue using the many validators offered through the web that check for cross-browser compliance.

Not as much these days, but it always ticked me off when you'd come to a site and they would announced: Best viewed with insert browser here at insert resolution here. Not that I'm looking to retire with the earnings from my site, but it won't due much good for business if the presentation looks like beepity-beep-beep.

[BTW, I do realize that I'm preaching to the choir on this and I still agree with you and JCsDesignz that IE needs to be moved to the Recycle Bin.] :D

By the way redsox9, you have an excellent site! I'm not a baseball fan, but I know some, and two of them are diehard Red Sox faithful. I think they'll really like your site.

Thanks for the kudos! I'm currently in the process of updating the site to make my life a little easier as well as to take down some of the content that gets little to no interest from my viewership. Especially given the recent success of the team, fan sites are popping up all over the place, so I have the challenge of trying to compete with some pretty healthy competition for the affections of Red Sox Nation.

Feel free to send people my way any time - even if they happen to be Yankees fans! :rolleyes:

[Ed. note -- my wife is from NY and almost everyone in her family roots for that team, so don't expect to rattle my cage if you also happen to favor pinstripes. ;) ]

timberford

03-07-2006, 02:55 PM

by far the best ie bug fixing site is http://positioniseverything.net/

and yes ie7 will much improved over its' predecessors. check out the official ie blog and in particular this article: http://blogs.msdn.com/ie/archive/2006/03/02/542287.aspx

they showcase two advanced css sites fully functioning in ie7. Gemination, Egor Kloos’s progressively enhanced CSS Zen Garden design and 'All That Malarkey’.

redsox9

03-07-2006, 07:04 PM

meta613

05-28-2006, 11:46 AM

I would set the width to a 300px for example instead of auto until you get the right width. It looks like either div.hml is to wide or div.hmr is to wide from the auto width ou have set.

div.hml {
border: 0 solid #FFFFFF;
float: left;
width: auto;
padding: 0.1em 0 0.1em 0.5em;
text-align: left;
background-color: #006633;
color: #FFFFFF;
}