4 replies [Last post]
vividimagemarketing
Offline
newbie
Hervey Bay, Qld, Australia
Last seen: 13 years 51 weeks ago
Hervey Bay, Qld, Australia
Joined: 2007-02-03
Posts: 3
Points: 0

Hi guys, I'm at the end of the line with this one. I have structured a valid XHTML site[url] http://www.widebayprestigeproperties.com.au/home.php[/url]. The site of course, renders perfectly in normal browsers but the usual MS junk served up get's it all wrong. (surpirse surprise)

If you look at the above URL in IE you will note large space under the top logo and huge space in the center column between the paragraph and image.

The IE specific CSS can be seen in the source and the CSS proper is:

#container { width: 780px; margin: 10px auto; padding: 0; background-color: #fff; color: #333; /*border: 1px solid gray;*/ line-height: 130%; }

#masthead
{
padding: .5em;
/*border-bottom: 1px solid gray;*/
}

#header
{
height: 30px;
padding: .5em;
background-color: #FFFFFF;
}

div#header img
{
height:120px;
margin: 0;
padding: 0px;
poistion: relative;
z-index: 0;
}

/* Navigation */
#navigation {
width: 70%;
background: #FFFFFF;
float: right;
}

#navigation ul {
list-style: none;
margin: 0;
padding: 0 0 0 0;
width: 6.5em;
float: right;
text-align: center;
}

#navigation a, #navigation h2 {
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size: .95em;
font-weight:normal;
display: block;
margin: 0;
padding: 2px 3px;
}

#navigation li ul li a {
font-size: .70em;
border: 1px dotted gray;
}

#navigation h2 {
color: #666666;
background: white;
}

#navigation a {
color: #333333;
background: #FFFFFF;
text-decoration: none;
}

#navigation h2 a {
padding-top: 20px;
}

#navigation a:hover {
color: #009999;
background-color: #FFFFFF;
}

#navigation h2 a:hover {
background-image:url(../images/nav_house.gif);
background-repeat:no-repeat;
background-position:center bottom;
color: #FFFF00;
}

#navigation li {position: relative;}

#navigation ul li active
{
background-image:url(../images/nav_house.gif);
background-repeat:no-repeat;
background-position:center bottom;
color: #FFFF00;}

#navigation ul ul {
position: absolute;
z-index: 500;
}

#navigation ul ul ul {
top: 0;
left: 100%;
}

div#navigation ul ul,
div#navigation ul li:hover ul ul,
div#navigation ul ul li:hover ul ul
{display: none;}

div#navigation ul li:hover ul,
div#navigation ul ul li:hover ul,
div#navigation ul ul ul li:hover ul
{display: block;}

/* end Navigation */

#colour_bar
{
margin: 45px 0px 0px 0px;;
padding: 0;
background-image: url(../images/colour_bar.gif);
background-repeat:repeat-y;
background-position: top left;
text-align: right;
}

div#colour_bar p
{
vertical-align: bottom;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size: 0.8em;
color:#FFFF00;
margin: 0;
padding: 0 1em 0 0;
}

/* Page Structure*/

#left_column
{
float: left;
width: 80px;
margin: 0;
padding: 1em;
}

#center_column
{
margin-left: 120px;
border-left: 1px dotted gray;
margin-right: 200px;
border-right: 1px dotted gray;
padding: 1em;
text-align: justify;
}

#right_column
{
float: right;
width: 160px;
margin: 0;
padding: 1em;
text-align: justify;
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
/* background-color: #009999; */
border-top: 1px solid gray;
}
/* end page structure */

div#center_column ul
{
padding: 1em;
margin:0;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:80%;
}

div#center_column ul li a
{
text-decoration: none;
color: #009999;
}

div#center_column ul li a:hover
{
text-decoration:underline;
}

div#left_column h1, div#right_column h1, div#center_column h1
{
font-size: 110%;
color: #666666;
margin: 0;
padding: 0 0 1em 0;
}

div#left_column h2, div#right_column h2, div#center_column h2
{
font-size: 105%;
color:#999999;
margin: 0;
padding: 0 0 1em 0;
}

div#left_column h3, div#right_column h3, div#center_column h3
{
font-size: 100%;
color:#999999;
margin: 0;
padding: 0 0 1em 0;
}

#home_img
{
width: 430px;
margin: 0px;
padding: 2px 0px 2px 0px;
}

#left_column p, #center_column p, #right_column p
{
margin: 0 0 1em 0;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size: 80%;
}

#right_column li
{
margin: 1em 3em 2em 3em;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size: 80%;
}

#left_column img
{
width: 70px;
margin: 0;
padding: 0.8em;
}

#right_column img
{
width: 160px;
margin: 0;
padding-bottom: 1em;
vertical-align: top;
text-align: center;
}

/* Footer divs */
#developer
{
float: right;
text-align: right;
font-size: 70%;
}

.vivid {color: #00CC00;}
.image {color: #FF0000;}
.marketing {color: #0000FF;}

#footer_agency_details
{
float: left;
font-size: 70%;
width: 400px;
}

#w3c, #w3c p a
{
float: left;
border: 0px;
color: #FFFFFF;
}

#footer a
{
text-decoration: none;
color:#333333;
}

#footer a:hover
{
text-decoration:underline;
}

/* Extras */
#feeds_img
{
float: right;
}

.dropcap
{
float: left;
width: 1.1em;
font-size: 3.7em;
line-height: 83%;
}

#jade
{
float: right;
z-index: 1;
width: 160px;
}

Please help shed some light on this? I've tried all the sites, googled for days... *sigh*

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 days 10 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Since the problem is with

Since the problem is with IE, let's start by ridding ourselves of the IE specific css. Many of the hacks can be easily included in the mainstream stylesheet, and some, I didn't see the need for.

With a clean slate, we can add only what's needed, and fiddle with just the one file.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

vividimagemarketing
Offline
newbie
Hervey Bay, Qld, Australia
Last seen: 13 years 51 weeks ago
Hervey Bay, Qld, Australia
Joined: 2007-02-03
Posts: 3
Points: 0

Cleaned up some code...

Gary, I have strippped out some superfluous experiemental IE code from the HTML "if IE". What I have left in there are some navigation hacks that come from the designer of the navigation system. The htc behaviour is necessary to trigger IE on the :hover.

Where now?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 days 10 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

I removed all IE specific

I removed all IE specific style rules. No conditional comment stuff at all. Then made this change:

 #center_column
  {
  margin-left: 120px;
  border-left: 1px dotted gray;
  margin-right: 190px;  /*200px;*/
  border-right: 1px dotted gray;
  padding: 1em;
  text-align: justify;
  }

I didn't track down the exact cause, but look for some over-size element enlarging its parent, or maybe IE's 3 pixel bug.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

vividimagemarketing
Offline
newbie
Hervey Bay, Qld, Australia
Last seen: 13 years 51 weeks ago
Hervey Bay, Qld, Australia
Joined: 2007-02-03
Posts: 3
Points: 0

Go you good thing!

Gary, you are a legend. All is now goodness on the site. Your change from right margin 200px to 190px seems to have allowed more breathing room around the image and IE's 3pixel bug perhaps no longer forces the image down the page till after the left floated boxes. Thank you very much for that.

I managed to get the logo to do the do by setting conditionally to position: absolute.

Magic!
Cheers!