problema header

**idro** · 15-02-2011, 17:56

ho un problema nell'header del mio sito cioè si vede bene con Chroom ma con mozzilla e ie no si vede sotto un striscia bianca ecco i codici css e php:
php:

Codice PHP:


<body <?php body_class(); ?>> <div id="container"> <div id="top"> <div id="header" class="col-full"> <div id="logo"> <?php if (get_option('woo_texttitle') <> "true") : $logo = get_option('woo_logo'); ?> [url="<?php bloginfo('url'); ?>"]"> [img]<?php if ($logo) echo $logo; else { bloginfo('template_directory'); ?>/images/logo.png<?php } ?>[/img]" /> [/url] <?php endif; ?> <?php if(is_single() || is_page()) : ?> <span class="site-title">[url="<?php bloginfo('url'); ?>"]<?php bloginfo('name'); ?>[/url]</span> <?php else: ?> <h1 class="site-title">[url="<?php bloginfo('url'); ?>"]<?php bloginfo('name'); ?>[/url]</h1> <?php endif; ?> <span class="site-description"><?php bloginfo('description'); ?></span> </div> </div> <?php if (get_option('woo_ad_top') == 'true') : ?> <div id="topad"> <?php include (TEMPLATEPATH . "/ads/top_ad.php"); ?> </div> <?php else: ?> <div id="address"> <ul> <li class="name"><?php echo get_option('woo_address_name'); ?> <li class="street"><?php echo get_option('woo_address_street'); ?> <li class="telephone"><?php echo get_option('woo_address_phone'); ?> <li class="email"><?php echo get_option('woo_address_email'); ?>[/list]</div> <?php endif; ?> </div>

css:

codice:

/* Style: Default */ /*-------------------------------------------------------------------------------------------*/ /* 1. SETUP */ /*-------------------------------------------------------------------------------------------*/ /* 1.1 Defaults */ #container { background: #ecf0f6 url(default/bgtile.jpg); } #top { background: #ecf0f6 url(default/bg.png) repeat-x; position:top; } h1, h2, h3, h4, h5, h6 { color: #333; } /* 1.2 Hyperlinks */ a:link, a:visited { color: #3399cc; } /*-------------------------------------------------------------------------------------------*/ /* 2. SITE STRUCTURE & APPEARANCE */ /*-------------------------------------------------------------------------------------------*/ /* 2.1 Containers & Columns */ /* 2.2 Navigation */ /* 2.2.1 Drop-down menus */ /* 2.3 Header */ #logo .site-title a { color:#3399CC; } /* 2.4 Featured Slider */ .slider-nav { background: url(default/featurednavtile.jpg) repeat-x left top; } .slider-nav ul li a { color: #b6e1fa; } /* 2.5 Content */ /* 2.6 Sidebar */ /* 2.7 Footer */ #footer { background: #c5d6e3; } #footer .top { border-bottom: 1px solid #96bcd9; } #footer .bottom { border-top: 1px solid #f2f6fa; color:#555; } #footer .widget a:link, #footer .widget a:visited { color: #333; } #footer .widget a:hover { color: #000; } #footer #wp-calendar a:link, #footer #wp-calendar a:visited { color: #3399cc; } #footer #wp-calendar th { background: #ecf0f6; } #footer #wp-calendar th, #footer #wp-calendar td { color:#333;border: 1px solid #ecf0f6;} #footer .widget_woo_twitter ul { border-top: 1px solid #ecf0f6; } #footer .widget_woo_twitter li { border-bottom: 1px solid #ecf0f6; } #footer .widget input#s, .widget input.field { border:#ecf0f6 1px solid; } #footer .widget_woo_flickr a img { border: #ecf0f6 2px solid; } #footer .widget_woo_flickr a:hover img { border:#3399cc 2px solid; } /*-------------------------------------------------------------------------------------------*/ /* 3. POSTS */ /*-------------------------------------------------------------------------------------------*/ .post.home { background: url(default/post-border-home.jpg) repeat-x left bottom; } .post-meta span { background: url(default/metabullet.jpg) no-repeat right 3px; } /* 3.1 Typographic Elements */ .entry blockquote { border-left: 2px solid #3399cc; } /* 3.2 Images */ /* 3.3 Pagination / WP-Pagenavi */ .wp-pagenavi .current, .wp-pagenavi .on, .wp-pagenavi a:hover { color: #3399cc!important; } /*-------------------------------------------------------------------------------------------*/ /* 4. WIDGETS */ /*-------------------------------------------------------------------------------------------*/ /* 4.2 Generic Widgets */ #sidebar .widget_recent_comments li a, .widget_woo_twitter a { color: #3399cc!important; } /* RESET <A> STYLING FOR RECENT COMMENT & TWITTER */ /* 4.2 Specific Widgets */ /* NEWS WIDGET */ /* WIDGET FORMS */ /* TAG CLOUD */ /* TWITTER */ /* FLICKR */ .widget_woo_flickr a img { border: #CECFC6 1px solid; } .widget_woo_flickr a:hover img { border:#A8AA99 1px solid; } /* ADS */ /* LIFESTREAM */ /* CALENDAR */ /*-------------------------------------------------------------------------------------------*/ /* 5. COMMENTS */ /*-------------------------------------------------------------------------------------------*/ /* 5.1 Comments */ #comments .comment.depth-1 { border-bottom: 1px solid #ebeff4; } #comments .avatar-box img { border: 1px solid #dee6f4; } /* 5.2 Pingbacks / Trackbacks */ /* 5.3 Comments Form */ #commentform { background: #e0e8f3; } #commentform input.txt { border: 1px solid #eee; } #commentform textarea { border: 1px solid #eee; } /*-------------------------------------------------------------------------------------------*/ /* 6. MISC */ /*-------------------------------------------------------------------------------------------*/ /* 6.1 Buttons */ .button, .button:visited, .reply a{ background-color:#3399cc; } .button.grey { background-color:#e0e0e0; color:#555 !important; }

devo mettere un immagine che si ripete nella larghezza che fa da striscia ecco il sito
così vedete voi http://clanitaforce.altervista.org

**ResianTaxidrive** · 16-02-2011, 13:38

non so se ho capito la domanda,
non ti va bene quella striscia bianca sotto la testata? se è così metti a #top come colore di sfondo #01395A

**idro** · 16-02-2011, 15:08

esatto però io ho fatto così:
Ho modificato l'altezza e ho creato un immagine da ripetere nell'x. e deve comparire sorpa il menù senza strisce. Solo che con Chroom la vedo bene cioè la top e sotto il menù senza strascia bianca mentre in mozzilla e ie si vede sotto una striscia bianca che dovrebbe scomparire

**ResianTaxidrive** · 16-02-2011, 15:16

ho capito ma o cambi il colore del background in modo che sia blu come il pezzo sotto e non ti si vede la striscia bianca,oppure cambi document type facendolo diventare strict
Il problema è infatti il padding-bottom dell'header, se lo porti a 18px in firefox si vede bene ma dubito che con Chrome verrà uguale, se mantieni il document type attuale.

**idro** · 16-02-2011, 17:56

quindi in parole semplici?

**ResianTaxidrive** · 16-02-2011, 19:00

la cosa più semplice è mettere il colore del background di #top a #01395A anzichè quel colore grigio che hai messo attualmente (riga 11 del default.css)

**idro** · 16-02-2011, 20:10

ok funziona graziee mille un'ultima cosa in IE i bordi di tutte le tabelle non si vedono arrotondati come mai?
se può servire ecco il file style generale:

codice:

* 1.1 Defaults */ body { color: #555; font: 14px Helvetica,Arial,Sans-serif; line-height: 1.5; } h1, h2, h3, h4, h5, h6 { margin: 0; font-family: "Lucida Grande", Helvetica, Arial, Sans-serif; } h1 {font-size: 30px;} h2 {font-size: 24px;} h3 {font-size: 20px;} h4 {font-size: 18px;} h5 {font-size: 14px;} h6 {font-size: 12px;} p {margin: 0;} hr { background-color: #e6e6e6; border:0; height: 1px; margin-bottom: 20px; } div.hr { margin: 20px 0; height:2px; background: url(images/bg-hr.png) repeat-x;} div.hr hr { display: none; } /* 1.2 Hyperlinks */ a:link, a:visited { text-decoration: none; } a:hover { text-decoration: underline; } h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, h3 a:link, h3 a:visited, h4 a:link, h4 a:visited, h5 a:link, h5 a:visited, h6 a:link, h6 a:visited { text-decoration: none; } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {text-decoration: underline;} /*-------------------------------------------------------------------------------------------*/ /* 2. SITE STRUCTURE & APPEARANCE */ /*-------------------------------------------------------------------------------------------*/ /* 2.1 Containers & Columns */ #container { } .col-left { float: left; } .col-right { float: right; } .col-full { width: 940px; margin: 0 auto; } /* 2.2 Navigation */ #navigation { height: 38px; width: 886px; padding: 0 26px; margin-bottom: 20px; font-size: 14px; font-weight: bold; font-family: "Lucida Grande", Helvetica, Arial, Sans-serif; text-transform: uppercase; border: 1px solid #fff; background: #fff url(images/navtile.jpg) repeat-x left top; } #navigation .search { float: right; margin: 0; width:215px; } #navigation .search #searchform { margin: 7px 0 0 0; } #navigation .search input#s { float: left; width: 176px; padding: 6px 0 6px 10px; background: url(images/searchinput.png) no-repeat left top; border: none; color:#777; } #navigation .search input.submit { float: right; padding: 6px 0 0 8px; } #nav { float: left; width: 650px; height: 36px; } #nav, #nav ul { z-index:100; margin:0; padding:0; list-style:none; line-height:1; } #nav a { display:block; z-index:100; padding:0 10px; line-height:28px; color: #999; line-height: 38px; } #nav a:hover, #nav .current_page_item a { color: #333; text-decoration: none; } #nav li { float:left; width: auto; margin: 0 14px 0 0; } /* 2.2.1 Drop-down menus */ #nav li ul { position: absolute; left: -999em; width: 170px; border: 1px solid #F7F6F6; } #nav li ul li { background: #fff url(images/navtile.jpg) repeat-x left top; border-width: 0 1px 1px; margin:0; padding:0; } #nav li ul li a { width:160px; line-height:30px; font-size:11px; color:#555; } #nav li ul li a:hover {background: #e8e8e8; } #nav li ul ul { margin: -32px 0 0 170px; } #nav li ul ul li a { } #nav li ul li ul li a { } #nav li:hover,#nav li.hover { position:static; } #nav li:hover ul ul, #nav li.sfhover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfhover ul ul ul ul { left:-999em; } #nav li:hover ul, #nav li.sfhover ul, #nav li li:hover ul, #nav li li.sfhover ul, #nav li li li:hover ul, #nav li li li.sfhover ul, #nav li li li li:hover ul, #nav li li li li.sfhover ul { left:auto; } /* 2.3 Header */ #header{padding:50px 0 25px;clear:both;position:relative;} #logo { float:left;} #logo img { } #logo .site-title { margin-top:100px; } #logo .site-title, #logo .site-description { display: none; } #logo .site-title a { font-size:42px; font-weight:bold; letter-spacing:-1px; line-height:40px; text-transform:uppercase; } #logo .site-title a:hover { text-decoration:none; } #logo .site-description { color:#555; text-transform:uppercase; font-size:12px;} #topad, #address { float: right; text-align: right; } #address { margin: 0 5px 0 0; color: #555; } #address .name { text-transform: uppercase; font-weight: bold; } #address .telephone, #address .email, #address .street { font-size: 13px; line-height: 14px; } #address .telephone { font-style: italic; } /* 2.4 Featured Slider */ #loopedSlider { position: relative; z-index: 1; margin:0 auto; } #loopedSlider .alignright {margin: 0 0px 8px 20px;float: right;} #loopedSlider .nav-buttons { list-style-type:none; margin:0; padding:0; position:relative;} #loopedSlider li#p { position:absolute; top:70px; left:-30px; } #loopedSlider li#n { position:absolute; top:70px; right:-30px; } #loopedSlider .container { width:940px; min-height:250px; height:250px; overflow:hidden; position:relative; font-size: 16px; color: #919191; background: #f7f7f7;} #loopedSlider .slides { position:absolute; top:0; left:0; } #loopedSlider .slides div.slide { position:relative; top:0; padding:20px 40px 15px; width:860px; display:none; } #loopedSlider .nav-buttons { list-style-type:none; margin:0; padding:0; position:relative; z-index: 2;} #loopedSlider .button { margin: 10px 10px 0 0; padding: 8px 14px 8px; line-height:16px; } .slider-nav { position: relative; z-index: 0; text-align: center; width: 930px; height: 49px; } .slider-nav ul li { display: inline; } .slider-nav ul li a { z-index: 9999;position: relative; margin: 0 20px; padding: 19px 0 16px 0; line-height: 47px; font-weight: bold; font-size: 15px; font-family: "Lucida Grande", Helvetica, Arial, Sans-serif; } .slider-nav ul li.active a, .slider-nav ul li a:hover { color: #fff; background: url(images/slider-nav-active.png) no-repeat center top; } #featured { margin-bottom: 30px; } #featured h2 { margin: 0 0 10px 0; font-size: 35px; color: #434343; } #featured h4 { font-size:18px; color:#333; font-family:Arial, Helvetica, sans-serif; line-height:22px; letter-spacing:1px; } #featured p { font-size:14px; color:#666; line-height:20px; margin-bottom:20px;} #loopedSlider .slides ol, #loopedSlider .slides ul { line-height: 18px; } #loopedSlider .slides ul { padding-left: 20px; } #loopedSlider .slides ul li { list-style: dot; padding: 3px 0; } #loopedSlider .slides ol { padding-left: 20px; } #loopedSlider .slides ol li { list-style: decimal; padding: 3px 0; } /* 2.5 Content */ #content{padding:0;} #main{width:580px;} #main.box { width: 540px; padding: 30px 20px; background: #fff; } #main.fullwidth { width: 900px; } /* 2.6 Sidebar */ #sidebar{width:340px;}

Discussione: problema header

Strumenti discussione

Ricerca discussione

Visualizza

problema header

Permessi di invio