*sigh*

[telophase]

Anyone with CSS knowledge here know why the ConDFW logo on the ConDFW page sits nicely and neatly over to the left top in Firefox but sits squat in the middle in IE7?

The relevant (possibly) CSS styling under the cut.


This theme has an IE-hack style and a regular one.

IE-hack:

* html #header div.logo{
background-image:url(images/condfw-logo2.gif) no-repeat left top;
left:10px;
text-align: left
}

Regular CSS:

/**
* HEADER
*/

#header{
padding:35px 10px 10px 10px;
height:75px;
text-align:center;
background:transparent url(images/sfondobis.jpg) repeat left top;
border-bottom:5px solid #000;
}

#header h2{
letter-spacing:2px;
font-size:34px;
line-height:1;
text-align:center;
}

#header h2 a{
color:#000;
text-decoration:none;
}

#header div.description{
color:#999;
letter-spacing:2px;
text-transform:uppercase;
}

#header div.logo{
display:block;
width:142px;
height:75px;
background: url(images/condfw-logo2.gif) no-repeat left top;
position:absolute;
top:10px;
margin-left:10px;
}

#header div.logo span{
display:none;
}

Off to get a haircut!


In order to forestall the helpful-intention comments that I usually get which don't help because they don't relate to the actual question I asked:

1) I don't give a damn if the site validates. We're not a government institution.

2) I'm using Wordpress, as shown by the little credits bar in the footer. This means that I don't have that much control over the placement of all the elements on the page without getting into the guts of the theme programming and the ENTIRE POINT of using Wordpress is to AVOID getting into the guts of coding. So don't worry about letting me know that you don't like (X) type of design, because chances are I'm not going to be able to change it. Bugs that render parts of the site unusable excepted, of course.

3) Anyone who wants to argue either of the above two is cordially invited to code their own version of this site. Keep in mind it's going to have to include a robust content management system that allows non-coders to update the site *and* manages guest/panelist bios that we keep from year to year (with some guests returning, some not) *and* has a shopping cart attached so we can sell t-shirts and memberships. Yeah. I didn't think so.

Comments

[sleary.livejournal.com]

I do not know, but I have a suggestion. Unless the inner text you're hiding is a placeholder, its presence is pointless. Instead of doing that, just make div.logo a wrapper around all the other heading stuff, and make the logo a non-repeating background.

[chomiji]

That is so much more interesting than what I am actually working on.

Actually, I am getting the logo in the same position on both browsers (Firefox/2.0.0.16, IE 6.0.2900.2180, both on Windows XP) as long as I adjust the window to the width of the horizontal bars (and it's about 3/4 in. in from the left). But if I mess around with the window width and make it larger than the bars, the behavior is different: on Exploder, the logo maintains alignment with respect to the window, so it ends up outside the space defined by the bars. On FF, it maintains its alignment with respect to the bars.

And now I need to get back to the ugly IT tip article that's running tomorrow.

[emtigereyes.livejournal.com]

Ah, but the culprit is IE7.

[chomiji]

That just fits in with most of what I've done today ... oh well. It's the only IE I have.

[lanisatu.livejournal.com]

It could be the way that the divs are nested. There's nothing wrong with the CSS you posted.

Could you possibly change the parts of the header to float: left instead of using absolute positioning? (one for the logo, another for the text) That might give you more control.

You also might want to cross-post this to web_design

[tool-of-satan.livejournal.com]

As far as I can tell the special IE style sheet is simply not being used, or at least the div.logo part isn't (based on tests using copies of the files - I can put all sorts of crap in that section and it has no effect).

Why it is not being used, I have no idea. It looks as if it should be but I know practically nothing about CSS.

However, it should be simple enough to get the display correct. Adding "left: 10px" to the div.logo definition in the main style sheet works. I can't tell if this will cause the display to be wonky in FireFox since FireFox won't render my local copy properly.

If it does, you can always add a code snippet to the page itself, anywhere after the style sheets are linked (or maybe earlier would be fine, I dunno). I can't figure out any way to get LJ to actually post the code, so I will e-mail it.

[telophase.livejournal.com]

Thank you very much! I'll probably be looking at this tomorrow afternoon, as I have to work the ref desk and there's not likely to be too many ref questions as it's the summer and not right before finals. XD