 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / October 2005Internet Explorer not rendering CSS properly - fine in Firefox
IE 6 Firefox looks just fine. I have run my html and css through the W3C validator. The html is fine and the css gets the following: "Line : 3 (Level : 1) You have no color with your background-color : body Line : 23 (Level : 1) You have no background-color with your color : div#content h1 Line : 25 (Level : 1) Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space. : div#content h1 Line : 28 (Level : 1) Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space. : div#content h2 Line : 31 (Level : 1) Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space. : div#content h3 Line : 36 (Level : 1) You have no background-color with your color : em.emRed " These do not seem like they would cause my issue, which is, text over text. The following works fine in Firefox but looks like this in IE6: http://home.cfl.rr.com/jmartin104/uhf/ I'm new to CSS and learning. What is going on? > The following works fine in Firefox but looks like this in IE6: > http://home.cfl.rr.com/jmartin104/uhf/ If you're going to absolutely position something, you should set the top, left, right and/or bottom properties as well. Suggest you start with top:0 and left:0 then adjust to taste.  SignatureReply email address is a bottomless spam bucket. Please reply to the group so everyone can share. > > The following works fine in Firefox but looks like this in IE6: > > http://home.cfl.rr.com/jmartin104/uhf/ > > If you're going to absolutely position something, you should set the > top, left, right and/or bottom properties as well. Suggest you start > with top:0 and left:0 then adjust to taste. Now, my footer is floating up. How can I correct this? BTW, I'm reading Stylin' with CSS so if it addresses that, then let me know. > > The following works fine in Firefox but looks like this in IE6: > > http://home.cfl.rr.com/jmartin104/uhf/ > > If you're going to absolutely position something, you should set the > top, left, right and/or bottom properties as well. Suggest you start > with top:0 and left:0 then adjust to taste. That seems to fix that problem. Thanks! > > The following works fine in Firefox but looks like this in IE6: > > http://home.cfl.rr.com/jmartin104/uhf/ > > If you're going to absolutely position something, you should set the > top, left, right and/or bottom properties as well. Suggest you start > with top:0 and left:0 then adjust to taste. When would you want to use absolute over floating? > When would you want to use absolute over floating? I'd be very cautious about using absolute positioning if you don't really understand how it works, or the implications of using it. There are already way too many sites out there that think absolute positioning is a great way to make a pixel-perfect design. It isn't. That's not to say floats don't have their own issues. They do. A short list of some pros and cons can be found at <URL:http://css-discuss.incutio.com/?page=AbsoluteOrFloatLayout> You can't really make an informed decision until you understand how these positioning models work. You could go read the specs, even though they aren't all that easy to digest for a relative newbie. <URL:http://www.w3.org/TR/CSS21/visuren.html> SignatureReply email address is a bottomless spam bucket. Please reply to the group so everyone can share. > IE 6 > Firefox looks just fine. > I have run my html and css through the W3C validator. The html is fine > and the css gets the following: <snip errors> Fix the errors, because browsers have the right to ignore bad CSS. > These do not seem like they would cause my issue, which is, text over > text. The following works fine in Firefox but looks like this in IE6: > http://home.cfl.rr.com/jmartin104/uhf/ 404. It will help greatly if you give a URL to the page in question. > I'm new to CSS and learning. What is going on? Can't tell until we can see the page. Signature-bts -Warning: I brake for lawn deer > > IE 6 > > Firefox looks just fine. [quoted text clipped - 13 lines] > > Can't tell until we can see the page. Try again. The upload failed the first time. The validator actually called them Warnings. Not sure if that makes a difference to IE. >> http://home.cfl.rr.com/jmartin104/uhf/ > > 404. It will help greatly if you give a URL to the page in question. Ah, now it's working... I don't see any need for the absolute positioning at all. Float the nav div left, and give a suitable left margin to the content div. Use em instead of px, so when I increase the text, the divs expand with it. font-family:times new roman, arial, sans-serif; should be: font-family: "Times New Roman", arial, sans-serif; font names with spaces need quoted. but why you want to mix serif and sans-serif fonts remains a mystery. Consider also not using the color name in the selector. em.emRed {color:red;} Try em.emhot {color:red;} because next week you may want to use .. green .. and it will look strange to have a style called .emred that displays green. Whenever you assign a color, or background color, you need to assign the other as well. 185.72 KB (190181 bytes) for the background image is waaay to heavy. At Width: 1199px, Height: 801px. The edge where it repeats isn't pretty either. It needs more fading as I think it interferes with reading the content. Your logo is 44.42 KB (45485 bytes) and is resized in the HTML. Fix that. Same for the photo of the boys: 182.36 KB (186741 bytes) and resized from Physical Width: 592px, Physical Height: 400px Otherwise, it's pretty good. Signature-bts -Warning: I brake for lawn deer > >> http://home.cfl.rr.com/jmartin104/uhf/ > > [quoted text clipped - 6 lines] > em instead of px, so when I increase the text, the divs expand with > it. I'll remove this. It came from my book but I think it had to do with some example. > font-family:times new roman, arial, sans-serif; > should be: > font-family: "Times New Roman", arial, sans-serif; > font names with spaces need quoted. That's what the CSS validator was complaining about. > but why you want to mix serif and sans-serif fonts remains a mystery. Even to me. It was another example. I have a book on fonts but can't seem to find it. > Consider also not using the color name in the selector. > em.emRed {color:red;} > Try em.emhot {color:red;} > because next week you may want to use .. green .. and it will look > strange to have a style called .emred that displays green. Agreed. > Whenever you assign a color, or background color, you need to assign > the other as well. How do you make the background color clear? I mean, if the text is going over an image, you don't really want to SEE a background color. Transparent? Is that a color? > 185.72 KB (190181 bytes) for the background image is waaay to heavy. > At Width: 1199px, Height: 801px. The edge where it repeats isn't > pretty either. It needs more fading as I think it interferes with > reading the content. Oh yeah, I have to go back over the images for sure. Right now, they are being used as ideas for design. > Your logo is 44.42 KB (45485 bytes) and is resized in the HTML. Fix > that. Same for the photo of the boys: 182.36 KB (186741 bytes) and > resized from Physical Width: 592px, Physical Height: 400px > > Otherwise, it's pretty good. Thanks! I need to read up some more. My book is not real clear on the use of em. > How do you make the background color clear? I mean, if the text is > going over an image, you don't really want to SEE a background color. > Transparent? Is that a color? background-color: transparent; is legal. The reason is your visitor may have a default black background, and your black text would be invisible on it. > Thanks! I need to read up some more. My book is not real clear on the > use of em. For most things, you can use some value of em instead of px, except maybe for borders. Play with it, maybe starting with your nav div at somewhere around 13em wide, and the content with a left margin of 14em. Signature-bts -Warning: I brake for lawn deer > >> http://home.cfl.rr.com/jmartin104/uhf/ > > [quoted text clipped - 33 lines] > > Otherwise, it's pretty good. Thanks for the help! I got it looking much better now. > IE 6 > Firefox looks just fine. > I have run my html and css through the W3C validator. The html is fine > and the css gets the following: As kchayka mentioned, you must supply positioning information when using position:absolute: top, bottom, left, right. Otherwise you leave it to the browser's imagination about where to put the block. Signaturejmm (hyphen) list (at) sohnen-moe (dot) com (Remove .AXSPAMGN for email) |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.