I need some serious CSS help

[Chojin]

Most of my problem stems from the differences in the way IE and Firefox render pages. I've been reading around and sites keep recommending that I use CSS child selection to give different commands to firefox and IE. That's all well and good, but what the fuck are things in a CSS block the child of?

This is for a phpbb3 board I'm working on, so I don't even know exactly where everything is going. BUT FOR EXAMPLE if have a line in my stylesheet.css that goes like this:

.footerbar {
	background: #ebebeb none repeat-x 0 0;
	color: #FFFFFF;
	position: relative;
	right: 25px;
	top: 15px;
	clear:both;
	width: 780px;
	height: 86px;
	margin-bottom: 0;
	padding-bottom: 0;
	background-image: url("{T_IMAGESET_PATH}/strikers_footer.jpg");
}

What is the child selector for that?

* > .footerbar is understood in both browsers, so I can't use that.

html > body .footerbar doesn't let either browser understand it.

Insight, prz.

[MetalMilitia]

Do you the Firefox extension Firebug installed? I have a feeling it will tell you were exactly the element you're looking for is within the DOM.

Not sure I understand completely what you're asking though. If you just need a way of applying CSS attributes to classes conditionally, based upon the user's browser you may want to look at "!important". It's a horrible hack but it will cause IE to ignore an attribute and firefox to apply it in preference to any other declaration of the same attribute. So you could have:

top : 1px !important;
top : 2px;

This will mean firefox will use the important attribute in preference and IE will ignore it (because it doesn't support it).

[Chojin]

i will give that a whirl, thanks :D

[Chojin]

okay, no, IE seems to be using the values in the important block. I tried both

right: 25px !important;
right: 35px;

and

right: 35px;
right: 25px !important;

With the idea that the element in question needs to be further to the left in IE, but both times IE takes the 25px value.

[Chojin]

I might as well tip my hand here so you can see what I mean:

http://www.strikerscharged.com

If you look at the footer in IE and Firefox you'll see what I'm trying to move left.

The icons and shit in the thread lists move around and stuff in IE too for some reason, but one thing at a time, here ;<

[MetalMilitia]

Originally Posted by Chojin

okay, no, IE seems to be using the values in the important block. I tried both

right: 25px !important;
right: 35px;

and

right: 35px;
right: 25px !important;

With the idea that the element in question needs to be further to the left in IE, but both times IE takes the 25px value.

Hmm, I've only ever used it for IE6 problems in the past so I guess it's supported by IE7. I can't give you much more advice atm, but I'll have another look tomorrow if you've not fixed it by then.

[Mockery]

You know, it amazes me... back when I first started doing web design I was always pissed about all the little differences between coding for Netscape and IE, but I was always confident that those differences would eventually be eliminated, thus making the lives of web designers easier. 10 years later, it's still the same annoying bullshit differences that web designers have to deal with.

[Chojin]

Netscape is officially dead as of yesterday, though, so that's a step in the right direction.

[MetalMilitia]

Ah, OK I think I see your problem. I believe it's acting strangely because the page-footer is in the wrong place and you're trying to hack the footerbar back into the correct place.

try this:

Move the page footer into the correct position:

#page-footer {
clear:both; <!--You don't need this, as clear only works with floated elements-->
margin:0pt auto;
padding:25px 50px 0px 0px;
width:730px;
position:relative;
left:-25px; <!--Move the tag to the left of the main wrapper-->
}

Adjust the navigation so it lines up with the new footer:

.navbar {
background-color:#EBEBEB;
clear:both;
padding:0pt 10px;
margin-left:40px; <!-- Push the navbar in a bit so it doesn't look weird-->

}

Get rid of the hacky x positioning:

.footerbar {
background:#EBEBEB url(./styles/proStrikers/imageset/strikers_footer.jpg) repeat-x scroll 0pt;
color:#FFFFFF;
height:86px;
margin-bottom:0pt;
padding-bottom:0pt;
position:relative;
top:15px;
width:780px;
}




I'm not able to test these changes in IE but I suspect they'll fix your main issue.

[Chojin]

Okay, I put that in.

I had to change url(./styles/proStrikers/imageset/strikers_footer.jpg) to url("{T_IMAGESET_PATH}/strikers_footer.jpg") to get the footer to show up.

Now, in firefox, the top navbar is pushed too far to the right, while the bottom navbar (which uses the same style) is fine (???).

In IE, the header is offset to the right, navbars are fine, and the footer is nonexistant.

God damnit.

[MetalMilitia]

OK so obviously you'll need to update the page header to reflect the changes in the footer so as to keep nested elements consistently styled.

Not sure why it disappeared in IE7, it's kind of hard to debug CSS using only Firebug as it only works in Firefox.

Also I don't want to be the bringer of bad news but I checked the site in IE6 and it is, for want of a better word, extremely fucked up.

If you want to send me the forum in a .zip I should be able to run a local copy and get a better idea of what the problems are (PM me and I'll send you my e-mail address).