Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Banner showing fine in IE, but not Firefox
Old 07-03-2009, 03:00 AM Banner showing fine in IE, but not Firefox
Junior Talker

Posts: 1
Name: Chandler
Trades: 0
I downloaded a template of some free template site and have been editing it and finally have it how I want. Unfortunately, it is not appearing that way in Firefox. If I view the page in IE, it gives me a full image of the banner, while in Firefox, it just shows the bottom of the banner.

Any suggestions on what is causing this?

Page is here: http://www.divinemod.com

CSS is (banner2.jpg is the image):

Code:
/* CSS Document */

body {
    margin-top:29px;
    text-align:center;
    background-image:url('img/body_bg.jpg');
    background-color:#000000;
    font-family:Tahoma, sans-serif;
    font-size:11px;
    color:#eeeeee;
}

#wrapper {
    width:702px;
    margin:0 auto;
    background-image:url('img/wrapper_bg.jpg');
    text-align:left;
}

#header {
    float:left;
    width:702px;
    height:83px;
    background-image:url('img/header_bg.jpg');
}

h1 {
    margin:0px;
    padding:0px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size:30px;
    color:#ff5700;
}

h2 {
    margin:0px;
    padding:0px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size:18px;
    color:#ff5700;
}

h3 {
    margin:0px;
    padding:0px;
    font-family:Tahoma, sans-serif;
    font-size:11px;
    color:#eeeeee;
    font-weight:normal;
}

.cleaner {
    clear:both;
    height:0px;
    font-size:0px;
    border:none;
    margin:0; padding:0;
    background:transparent;
}

#header h1 {
    margin-top:25px;
    margin-left:25px;
}

#header h3 {
    margin-top:-6px;
    margin-left:25px;
}

#topnavi {
    float:left;
    width:702px;
    height:29px;
    background-image:url('img/topnavi_bg.jpg');
}

#topnavi ul {
    margin:0px;
    padding:0px;
    list-style-type:none;
    margin-left:8px;
    margin-right:8px;
}

#topnavi ul li.norm {
    float:left;
    height:29px;
    background-image:url('img/topbutton_norm.jpg');
    background-position:right;
}

#topnavi ul li.select {
    float:left;
    height:29px;
    background-image:url('img/topbutton_select.jpg');
    background-position:right;
}

#topnavi ul li.norm a {
    display:block;
    padding-right:24px;
    padding-left:24px;
    line-height:28px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#FFFFFF;
    font-size:10px;
    text-decoration:none;
}

#topnavi ul li.select a {
    display:block;
    padding-right:24px;
    padding-left:24px;
    line-height:28px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#FFFFFF;
    font-size:10px;
    text-decoration:none;
}

#topnavi ul li.norm a:hover {
    display:block;
    padding-right:24px;
    padding-left:24px;
    line-height:28px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#FFFFFF;
    font-size:10px;
    text-decoration:underline;
    text-align: center;
}

#topnavi ul li.select a:hover {
    display:block;
    padding-right:24px;
    padding-left:24px;
    line-height:28px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#FFFFFF;
    font-size:10px;
    text-decoration:underline;
}

#headimg {
    float:center;
    width:685px;
    height:142px;
    background-image:url('img/banner2.jpg');
    margin-left: 8px;
}

#bodybox {
    float:left;
    width:702px;
    background-image:url('img/bodybox_bg.jpg');
    background-repeat:no-repeat;
}

#subnavi {
    float:left;
    display:inline;
    margin-left:18px;
    margin-top:2px;
    padding-top:26px;
    padding-bottom:26px;
    width:180px;
    background-color:#1e1d1e;
    background-image:url('img/subnavi_bg.jpg');
    background-position:bottom;
}

#subnavi ul {
    margin:0px;
    padding:0px;
    list-style-type:none;
    margin-left:13px;
    margin-right:13px;
}

#subnavi ul li.norm, #subnavi ul li.select {
    height:24px;
    background-image:url('img/subnavi_button.gif');
}

#subnavi ul li.norm a {
    display:block;
    line-height:23px;
    padding-left:20px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#eeeeee;
    text-decoration:none;
}

#subnavi ul li.norm a:hover {
    display:block;
    line-height:23px;
    padding-left:20px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#eeeeee;
    text-decoration:underline;
}

#subnavi ul li.select a {
    display:block;
    line-height:23px;
    padding-left:20px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#ff5700;
    text-decoration:none;
}

#subnavi ul li.select a:hover {
    display:block;
    line-height:23px;
    padding-left:20px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#ff5700;
    text-decoration:underline;
}

#subnavi h2 {
    margin-left:17px;
    margin-bottom:6px;
}

#content {
    float:left;
    display:inline;
    width:640px;
    margin-left:27px;
    margin-right:27px;
    padding-top:26px;
    padding-bottom:26px;
    font-size: 11px;
    color: #ff5700;
}

#content p {
    color:#eeeeee;
    font-family: Tahoma, sans-serif;
}

#content ul {
    list-style-image:url('img/list_li.gif');
    color: #eeeeee;
}

#content a {
    color:#ff5700;
    text-decoration:none;
}

#content img.pic {
    float:right;
    margin-left:8px;
    margin-bottom:8px;
    border:1px solid #333333;
    padding:2px;
}

#content a:hover {
    color:#ff5700;
    text-decoration:underline;
}

#footer {
    float:left;
    width:702px;
    height:49px;
    background-image:url('img/footer_bg.jpg');
    text-align:center;
    color:#cccccc;
    font-family:Tahoma, sans-serif;
    font-size:9px;
    line-height:42px;
}

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

#footer a:hover {
    color:#cccccc;
    text-decoration:underline;
}
#wrapper #bodybox #content p {
    font-family: Tahoma, sans-serif;
    color: #eeeeee;
}
.secondarytitle {
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}
#wrapper #bodybox #content p em strong {
    color: #ff5700;
    font-size: 14px;
    font-weight: bold;
}
.secondarytit {
    color: #ff5700;
}
.TITLEPL {
    color: #ff5700;
}
#wrapper #bodybox #content .TITLEPL {
    color: #ff5700;
    font-size: 14px;
    font-weight: bold;
}
Much appreciated fellas,
Chandler
ChandlerT is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 07-03-2009, 11:50 AM Re: Banner showing fine in IE, but not Firefox
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
First of all, there is no such thing as float: center. Float properties are left, right or none. If you want to center the image, you have to use margin: 0 auto; on #headimg to make it center.

You've also got a lot of things floated that just don't need to be, like #header, #bodybox, #headerimg - if these will take up the full horizontal space, then there's no need to float them.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Banner showing fine in IE, but not Firefox
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

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 On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.10169 seconds with 12 queries