Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old January 8th, 2007, 08:50 AM
Friend of Wrox
 
Join Date: Aug 2003
Location: Warks, Warks, United Kingdom.
Posts: 137
Thanks: 0
Thanked 0 Times in 0 Posts
Default IE7 Padding issue.

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
__________________
Gaz
Reply With Quote
  #2 (permalink)  
Old January 8th, 2007, 10:45 AM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , .
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

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
Reply With Quote
  #3 (permalink)  
Old January 8th, 2007, 11:36 AM
Friend of Wrox
 
Join Date: Aug 2003
Location: Warks, Warks, United Kingdom.
Posts: 137
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
Reply With Quote
  #4 (permalink)  
Old January 8th, 2007, 11:43 AM
Friend of Wrox
 
Join Date: Aug 2003
Location: Warks, Warks, United Kingdom.
Posts: 137
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
Reply With Quote
  #5 (permalink)  
Old January 8th, 2007, 12:15 PM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , .
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

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
Reply With Quote
  #6 (permalink)  
Old January 9th, 2007, 04:54 AM
Friend of Wrox
 
Join Date: Aug 2003
Location: Warks, Warks, United Kingdom.
Posts: 137
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
Reply With Quote
  #7 (permalink)  
Old January 9th, 2007, 04:56 AM
Friend of Wrox
 
Join Date: Aug 2003
Location: Warks, Warks, United Kingdom.
Posts: 137
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS overflow:hidden issue in IE6 and IE7 kwilliams CSS Cascading Style Sheets 1 May 27th, 2008 05:44 AM
Padding Zeros jmss66 Classic ASP Basics 5 January 28th, 2008 07:38 PM
x browser issue and IE7 on a PC Adam H-W CSS Cascading Style Sheets 0 August 11th, 2007 01:03 PM
"Padding" a value in XSL francislang XSLT 1 September 3rd, 2004 07:56 AM
padding problem anshul HTML Code Clinic 5 July 24th, 2004 11:11 PM



All times are GMT -4. The time now is 03:33 PM.


Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.