PDA

View Full Version : IE Positioning



DrewDizzle
Mar 11th, 2009, 07:34 AM
CSS is valid. HTML is MOSTLY valid (6 errors), all of which are inconsequential to this problem. Site looks fine in Safari/Firefox/Opera in OS X and Firefox in Vista. IE 6 and 7, however, are another story...

What am I missing here...?

http://www.drewdizzle.com/sloane/index

_Aerospace_Eng_
Mar 11th, 2009, 07:53 AM
Use this for the respective css. The position:absolute was causing most of the issues.

#logo h2 {
font-style: oblique;
font-size: 1.0em;
letter-spacing: 1px;
font-family: sans-serif;
color: #000000;
text-transform: lowercase;
float: left;
clear:left;
}

DrewDizzle
Mar 11th, 2009, 07:29 PM
That fixes IE but now non-IE browsers are jacked up. CC doesn't seem to work for this either... curious...

DrewDizzle
Mar 11th, 2009, 08:34 PM
Ok, this has caused more problems than it's solved. Using the modified tags with without the absolute positioning looks fine in IE but causes the menus to drop in Safari and FF. I've tried conditional commands but in-line and on separate stylesheets but have had zero success. wtf...?

_Aerospace_Eng_
Mar 12th, 2009, 05:36 AM
Float #logo to the left. Also you have a stray 's' after the #logo h2 styles.

DrewDizzle
Mar 13th, 2009, 12:12 AM
#logo h1, #logo p {
width: auto;
float: left;
text-transform: none;
}

#logo h1 {
font-size: 2.4em;
padding: 4px 0 0 0px;
color: #000000;
}

#logo h2 {
float: left;
width: auto;
font-style: oblique;
font-size: 1.0em;
letter-spacing: 1px;
font-family: sans-serif;
padding: 43px 0 0 0;
color: #000000;
text-transform: lowercase;
}

Logo is already floating left... that's the conundrum.

_Aerospace_Eng_
Mar 13th, 2009, 04:24 AM
Umm no its not. #logo h2 and #logo p are floating left but NOT #logo itself.

DrewDizzle
Mar 13th, 2009, 04:29 AM
adding #logo float:left doesn't change anything... H2 still floats in the ccenter. :(

_Aerospace_Eng_
Mar 13th, 2009, 06:43 AM
If you had made the changes I told you to make it would do something and your problem would be solved.


#logo {
float:left;
}
#logo h1, #logo p {
width: auto;
float: left;
text-transform: none;
}

#logo h1 {
font-size: 2.4em;
padding: 4px 0 0 0px;
color: #000000;
}

#logo h2 {
clear:left;
font-style: oblique;
font-size: 1.0em;
letter-spacing: 1px;
font-family: sans-serif;
padding: 0 0 0 0;
color: #000000;
text-transform: lowercase;
float: left;
}