IE7 Padding issue.

socoolbrewster · January 8th, 2007, 08:50 AM

Hi

Whenever I view this page in IE7 the X2 menu bars have less width than the rest of the design. Yet when I view the site in Firefox the page looks fine.

PAGE EXAMPLE:

http://www.testmole.co.uk/acatalog/test/acatalog/

CSS:

http://www.testmole.co.uk/acatalog/t...og/actinic.css

Below is the CSS that controls the look of the menu bar.

Code:


/* Start of search bar */ 

#search_bar { background-color:#69c; height:30px; text-align:right; clear:both; padding: 5px 0 0 0;} 
#about_links { float:left; width:300px; text-align:left; vertical-align:middle; } 
#about_links a { color:#fff; text-decoration:underline; font-size: 0.7em; padding: 0 3px; } 
#about_links a:hover { text-decoration:none;} form.simplesearch { float:right; width:300px; padding-right:10px; margin:0; } 
form.simplesearch input.SS { border: 1px solid #f60; } 
form.simplesearch input.search_button { border: 1px solid #666; background-color:#ccc; color:#666; font-size:10pt; } 
/* Start of breadcrumb */ 
#bread_crumb, div#footer { background: url("orange_spacer_shadow.jpg") repeat-x; height:24px;  
background-color:#f60; color:#fff; font-size: 0.7em; } 
#bread_crumb a, div#footer a { color:#fff; text-decoration:none; } #bread_crumb a:hover, div#footer a:hover { text-decoration:underline; }

Gaz

meow · January 8th, 2007, 10:45 AM

It sounds like a box model issue. Try a doctype that puts IE in Standards Mode and see what happens.
http://hsivonen.iki.fi/doctype/
http://css-discuss.incutio.com/?page=BoxModel
(Note - hacks are only needed for IE versions older than 6. For 6 and above Standards Mode is enough. I wouldn't bother with hacks for this.)

--
http://yupapa.com

socoolbrewster · January 8th, 2007, 11:36 AM

Hi

The site is being developed and then integrated into an E-comms software called Actinic. The DOCTYPE used is forced - as it was originally XHTML Transitional but the software changes it - which was when I noticed problem.

Gaz

socoolbrewster · January 8th, 2007, 11:43 AM

Also, the rest of the page is constructed the same way and doesnt have the same issue. Could it be in realtion to the form that's inserted in the DIVs concerned?

Gaz

meow · January 8th, 2007, 12:15 PM

Could you give an eample of such a page? All the links in the top menu lead to pages where the style sheet doesn't load at all. The pages under "BROWSE" have style applied but they all show the same problem.

If you can't change the doctype, don't use padding where it causes this problem, or use one of the hacks I linked to.

--
http://yupapa.com

socoolbrewster · January 9th, 2007, 04:54 AM

I think the problem might relate to my CSS. As on validating the CSS I'm getting a number of warnings.

Code:

body {
    text-align:center;
    margin:0;
    font-size:100%; 
    font-family: "Lucida Grande", Arial, sans-serif; color:#999; background-color:#fff;
    }

#wrapper {
        width:780px;
        margin: 0 auto;
        text-align:left;
        padding:0 7px;
        border-right: 2px solid #f60;
        border-left: 2px solid #f60;
        border-bottom:2px solid #f60;
        }

a { color:#69C; }        
a:link { text-decoration:none; }
a:visited { text-decoration:none; }
a:hover { text-decoration:underline; color:#f60; }
a:active {text-decoration:none; }

a#pageon { text-decoration:underline; color:#f60; }


/* Start of branding section  */


#sitelogo { float:left; width:250px; }
#sitelogo img { margin-bottom:10px; }
#cartlinks { font-size:0.9em; float:right; text-align:right; color:#69C; width:400px; }
div#cartlinks img { vertical-align:middle; padding:0px 4px; }

/* Start of TAB navigation using backgound images */

ul { margin:0; padding:0; list-style: none; width:780px; }

ul li { float:left; background: url("tab-right.gif") no-repeat top right; white-space:nowrap; }

li a { display:block; padding: 0 0.4em; 
    background: url("tab-left.gif") no-repeat top left;
    text-decoration:none;
    color:#666; font-size:0.66em; line-height:2.5em; 
    }


/* Start of search bar */

#search_bar { background-color:#69c; height:30px; text-align:right; clear:both; padding: 5px 0 0 0;}
#about_links { float:left; width:490px; text-align:left; vertical-align:middle; }
#about_links a { color:#fff; text-decoration:underline; font-size: 0.7em; padding: 0 3px; }
#about_links a:hover { text-decoration:none;}
form.simplesearch { float:right; width:300px; padding-right:10px; margin:0; }

form.simplesearch input.SS { border: 1px solid #f60; }
form.simplesearch input.search_button { border: 1px solid #666; background-color:#ccc; color:#666; font-size:10pt; }


/* Start of breadcrumb */

#bread_crumb, div#footer { background: url("orange_spacer_shadow.jpg") repeat-x; height:24px; 
                 background-color:#f60; color:#fff; font-size: 0.7em; }

#bread_crumb a, div#footer a { color:#fff; text-decoration:none; }
#bread_crumb a:hover, div#footer a:hover { text-decoration:underline; }

/* Start of banner section */

#banner_right {float:left; width:186px;}
#banner_content {float:left; width:464px; text-align:left; vertical-align:top; }
#banner_left {float:right; width:130px; vertical-align:bottom; clear:right; text-align:right; }
div#banner_content p { font-size:0.7em; padding:2px 0; margin:0; font-weight:100; }
h1 { color:#69c; font-size:1.60em; margin:0; font-weight:bold; }

/* Main content area */

#main_content { width:780px; }
#left_col { width:180px; float:left;}
#content_col { width:600px; float:right; }

/* left col content style */

#left_col div { width:170px; background-color:#fff; padding:2px; border:1px solid #f60; margin-bottom:4px; }
#left_col div a { display:block; text-decoration:none; font-size:0.8em; padding:2px; color:#69c; background-color:#EFEFEF; border:1px solid #fff;}
#left_col div a:hover { color:#fff; background-color:#f60; text-decoration:none;}
#left_col p { text-align:center; }
#left_col p a { font-size:0.7em; }
#left_col p a img { vertical-align:middle; }

#left_col div h4 { background-color:#f60; color:#fff; text-align:center; font-size:0.9em; margin:0;}

form#mail_frm { color:#69c; font-size:0.7em; margin:1px; background-color:#EFEFEF; margin:0; }
form#mail_frm input#email_text { border: 1px solid #f60; color:#69c; margin:3px 0; }
form#mail_frm input#submit_button { border: 1px solid #666; background-color:#ccc; color:#666; font-size:10pt; }

/* Right col content divided into 2 cols */

#main_right { width:126px; float:right; } 
#main_left { width:470px; float:left;} 

/* main_right col content */

#main_right p { width:125px; margin:5px 0 5px 0; text-align:center; color:#69c; font-family:Geneva, Arial, Helvetica, sans-serif; font-weight:800; font-style:italic;  font-size:0.6em; }
#main_right strong { color:#f60; }
#main_right img { display:block; }

/* main left col content */

#main_left div.container { width:450px; }
#main_left div.container div { width:140px; float:left; padding: 0 5px 0 5px; text-align:left; }
#main_left div.container div h4 { margin:0; padding:0; font-size:0.8em; }
#main_left div.container div h4 a { text-decoration:none; }

/* Footer links div */

div#footer_links { width:780px; font-size:0.7em; background-color:#EFEFEF; height:auto; text-align:center; margin-top:15px; }
div#footer_links a { text-decoration:none; }
div#footer_links a:hover, div#footer a:hover { text-decoration:underline; }
div#search_bar_foot { background-color:#69c; margin:0; height:auto; clear:both;text-align:right; padding: 5px 0 0 0; }
div#search_check_links { background-color:#69c; height:35px; float:left; width:490px; text-align:right; color:#fff; font-size:0.9em; }

form#search_foot_frm { background-color:#69c; height:35px; float:right; width:300px; padding-right:10px; margin:0;  }

div#search_check_links a { color:#fff;}

div#search_check_links img { vertical-align:middle; padding:0px 2px; }

form#search_foot_frm input#search_foot_text { border: 1px solid #f60; }
form#search_foot_frm input#foot_search_button { border: 1px solid #666; background-color:#ccc; color:#666; font-size:10pt; }

div#footer { text-align:center; clear:both; }

/* Start of div clearing IE bug */

.fixclear:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

* html .fixclear { height:1%;}
.fixclear { display:block; }

Gaz

socoolbrewster · January 9th, 2007, 04:56 AM

Here are the warnings I'm getting.

Same colors for color and background-color in two contexts div#footer and #nav li a:hover
1 Same colors for color and background-color in two contexts #left_col div a:hover and #nav li a:hover
1 #footer_links This property applies to block-level elements.
1 Same colors for color and background-color in two contexts div#footer and #nav li a:hover
1 Same colors for color and background-color in two contexts body and div#footer a
1 Same colors for color and background-color in two contexts #left_col div h4 and #nav li a:hover
1 #search_bar This property applies to block-level elements.
1 Same colors for color and background-color in two contexts #search_bar and h1
1 Same colors for color and background-color in two contexts #search_bar and a
1 Same colors for color and background-color in two contexts #search_bar_foot and h1
1 Same colors for color and background-color in two contexts #search_check_links and a
1 Same colors for color and background-color in two contexts #search_check_links and h1
1 #nav li This property applies to block-level elements.
1 Same colors for color and background-color in two contexts #search_foot_frm and h1
1 Same colors for color and background-color in two contexts body and div#footer a
1 Same colors for color and background-color in two contexts body and #about_links a
1 Same colors for color and background-color in two contexts #search_bar and form#mail_frm input#email_text
1 Same colors for color and background-color in two contexts #left_col div and #about_links a
1 Same colors for color and background-color in two contexts #search_check_links and form#mail_frm input#email_text
1 Same colors for color and background-color in two contexts #search_bar and #main_right p
1 #banner_content This property applies to block-level elements.
1 Same colors for color and background-color in two contexts #search_bar_foot and #main_right p
1 #left_col p This property applies to block-level elements.
1 Same colors for color and background-color in two contexts #search_check_links and #main_right p
1 Same colors for color and background-color in two contexts #search_bar_foot and #cartlinks
1 Same colors for color and background-color in two contexts #search_foot_frm and #main_right p
1 Same colors for color and background-color in two contexts #search_foot_frm and #cartlinks
1 #main_right p This property applies to block-level elements.
1 #wrapper This property applies to block-level elements.
1 #search_bar_foot This property applies to block-level elements.
1 #banner_left This property applies to block-level elements.
1 #search_check_links This property applies to block-level elements.
1 Same colors for color and background-color in two contexts #left_col div and div#footer a
1 Same colors for color and background-color in two contexts div#footer and #nav li a#pageon
1 Same colors for color and background-color in two contexts #search_bar_foot and a
1 Same colors for color and background-color in two contexts #left_col div a:hover and #nav li a#pageon
1 #main_left div.container div This property applies to block-level elements.
1 Same colors for color and background-color in two contexts div#footer and #nav li a#pageon
1 Same colors for color and background-color in two contexts #search_bar_foot and form#mail_frm input#email_text
1 Same colors for color and background-color in two contexts #left_col div h4 and #nav li a#pageon
1 body This property applies to block-level elements.
1 Same colors for color and background-color in two contexts div#footer and a:hover
1 Same colors for color and background-color in two contexts #search_check_links and #cartlinks
1 Same colors for color and background-color in two contexts #left_col div a:hover and a:hover
1 #left_col div h4 This property applies to block-level elements.
1 Same colors for color and background-color in two contexts div#footer and a:hover
1 #footer This property applies to block-level elements.
1 Same colors for color and background-color in two contexts #left_col div h4 and a:hover
1 Same colors for color and background-color in two contexts #left_col div and div#footer a
1 Same colors for color and background-color in two contexts body and #search_check_links a
1 Same colors for color and background-color in two contexts #search_bar and #cartlinks
1 Same colors for color and background-color in two contexts #left_col div and #search_check_links a
1 #about_links This property applies to block-level elements.
1 Same colors for color and background-color in two contexts div#footer and #main_right strong
1 Same colors for color and background-color in two contexts #search_foot_frm and form#mail_frm input#email_text
1 Same colors for color and background-color in two contexts #left_col div a:hover and #main_right strong
1 Same colors for color and background-color in two contexts #search_foot_frm and a
1 Same colors for color and background-color in two contexts div#footer and #main_right strong
1 #cartlinks This property applies to block-level elements.
1 Same colors for color and background-color in two contexts #left_col div h4 and #main_right strong

Gaz