Can anyone help me with some CSS?
I was wondering if anyone might know where this CSS problem is coming from, in IE the layout at the top is very wrong but it looks fine in every other browser. The layout is pretty rough right now, but the rest I know how to fix, Just the top header that is jumbled in IE has be confused. I am new to CSS and this is actually the first site ive done in CSS. I can send you the master css file if needed or the index file.
http://www.thedailybritney.com/index2a.php
Thanks :)
Observing members:
0
Composing members:
0
19 Answers
How is it jumbled?
Often for IE i use a second stylesheet and apply it using :
<link rel=“stylesheet” type=“text/css” media=“screen” href=“style.css” />
<!—[if IE]><link rel=“stylesheet” type=“text/css” media=“screen” href=“ie.css” />< ![endif]—>
The first one is your first stylesheet, the second is a stylesheet that only fixes the things that are bad in IE.
IE sometimes screws up layouts if you don’t have the metadata it wants at top. In one case, the format was messed up on one page in IE only, because it was missing a DOCTYPE tag at top, before the <html> tag, such as:
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd”>
Although that is sometimes true Zaku, most issues in IE stem from the fact that IE doesn’t apply css rules the way the standards suggest. The IE box model is different than most, which can create spacing issues. IE doesn’t handle transparent png’s. Etc.
at the top viewing it in IE the header image is actually 5 pieces – goes like this:
_________
_ __ _____
_________
If that makes any sense, the breaks are where a new image starts. however that 4th image is below the first two in the middle in IE but in firefox u will see how it should look. I dont know if that makes any sense
Here is how it looks in both.
The one in IE is missing the background image. But the header problem is obvious. I’m looking into a fix. And did I mention that IE needs to eat shit and die?
I’ll poke at it for awhile.
Edit:
Ok first thing, and this is going to sound elitist. I don’t like your combination of css and html. There’s no reason for the there to be a bunch of divs and img elements to create the orange box in the top header. Make one image (that has the entire box) then add padding to it to put the text (which I assume is what will be in that box) in the right place. It should be (imo) One div that contains the whole top bar. Then a second div that has the orange box.
You should have to add very few html elements to a page to make it look better. The idea of html and css is for html to hold the content and then use css almost solely to style it.
One thing you’ll need to look into is setting height and widths and then use display:block to make sure it uses those heights and widths. When you just put the img elements into a div, that sometimes works to keep the div only as big as the image, but in some cases it doesn’t work.
In my mind, the html of this page should be fairly simple:
<h1 id=“branding”> The Daily Britney.com</h1>
<div id=“headlines”></>
<ul id=“nav”><li> <a href=”” > Home</a></li> (etc for all links)
</ul>
<div id=“main content”>
</div>
<div id=“footer”></div>
Everything else can be done through css.
yikes i didnt even no it was missing the BG – Yeah I hate IE, i feel every version it gets worse and worse yet somehow its forced in ever new computer users face. Can’t we vote it off the island or something?
@perchik – thanks :) and thanks even if the poking doesnt work.
I will say though, i’m proud i got this far with the CSS considering i have no experience with it really…though id be really impressed if I opened IE and it actually worked….
Erm. I edited my answer too long and can’t go back and edit. I was going to explain a few things:
If you use h1 for the branding image, you can set the text-indent to -999px to hide the text. That makes your site degrade nicely if the stylesheet isn’t loaded. Then you can set h1 to be a block element through display:block. You can then set the height and width and background image. I’d suggest making the header just one image.
For the headlines div, you have two options. Set the margin-top to somerthing negative and add a z-index so that it sits on top of the header, or absolutely position it and add a z-index so that it sits on top of the header. You could export the orange box as a separate image (transparent png) or you could just leave the orange box as part of the header image and keep the headline div without a background.
It make sense semantically to use a list for the navigation, because without stylesheets, your list of links makes sense. Again you can strip list style from a list and the set the ul as a block element and style away.
For the content you could set the background color to that olive green color, then add the background image of her and set the background-position so that it’s in the right place.
Of course this is all if you want your page to make sense semantically. One of my pet peeves is web designers who insist on laying things out for an html table, but then implement it with css. Just because you’re not using a table for your table based layout doesn’t quite make it a not table-based layout In reality with this layout, you could have the whole britney vector as one image (transparent background) and position that. You could have the headlines as an orange transparent box and then position that. You don’t have to slice things up.
If you implement it my way it’s much easier to change the style in the future.
Oh.. The reason it was missing the background was because I saved it to my computer to work on it. It shows up in IE if I view it on the Internet.
The problem is that you’ve got the page set to 960px. Those three images add up to 960px. You can’t do that in IE, the page needs to be wider.
@perchik – i was thinking about doing something like you said but i had it all sliced up cause initially i was gonna use html then decided to do this, and went from there, maybe I should consider doing it your way…i get nervouse with the z index and absolute positioning ha
You can try to set the margin and padding on each of those images and divs to 0
well im at work right now but ill play with it later tonight
So im actually confused now, should I try to fix what I have or start over and try perchiks way? His way sounds a little easier…but it also sounds like something I don’t know to much about. I wish this was still 1999 and tables were what was up lol
Do what you know. My way makes for a much more accessible website and is easier to maintain in the long run (and complies with standards.)
Well to be honest it sounds a little easier…i get nervous about trying new things and then getting discouraged and calling quits on it. I put alot of time already into this with working on making a social network for it and forums then just the pages and news and all that, image gallery so really I just need to get this going and ill be okay pretty much. However I want to update my knowledge the best I can to keep up as I have fallen behind, but its frustrating at times ha
Welcome to web designing. If you think you’re caught up with the times, you’re not paying attention haha.
min-height: is not accepted by IE right?
Answer this question 
This question is in the General Section. Responses must be helpful and on-topic.
Composing members:
0
