Jump to content

[SOLVED] IE Firefox Issue

NSW42

By NSW42
in CSS Help

 Share

Recommended Posts

NSW42 Member

NSW42

Posted
Posted

Heya Everyone,

 

I have a slight issue, well a pain in the ass issue to be honest and cant beat it, my css works fine in IE but with ff its all over the place in the header, below is the css if anyone can help out with the problem, I think I have pinpointed where, but still cant seem to get around it, any help muchly appreciated.

 

 

a {

background:inherit inherit inherit inherit inherit;

color:#0076CD;

font-size:11px;

text-decoration:none;

}

a.side {

background:inherit inherit inherit inherit inherit;

color:#0076CD;

text-decoration:none;

}

a.side:hover {

background:inherit inherit inherit inherit inherit;

color:#0076CD;

text-decoration:underline;

}

a.white {

font-weight:normal;

}

img {

border:0pt none;

}

html, html body {

height:100%;

}

body {

background:#FFFFFF none repeat scroll 0%;

color:#000000;

font-family:Tahoma,Arial,Helvetica,Sans-Serif;

font-size:75%;

line-height:150%;

margin:0pt;

padding:0pt;

}

.header {

background:#EEF4FD url(images/bg_header.png) repeat-x scroll left top;

color:inherit;

height:5px;

}

.title {

float:left;

margin-top:16px;

}

.title img {

float:left;

margin-right:6px;

}

.title_header {

font-size:125%;

font-weight:bold;

margin:0pt;

padding:7px 0pt 0pt;

}

.title h1 {

font-size:135%;

font-weight:bold;

margin:0pt;

padding:7px 0pt 0pt;

}

.title h1 a:hover {

background-color:inherit;

color:#0A2D68;

}

.title p {

background-color:inherit;

color:#726958;

margin:0pt;

padding:0pt;

}

.menu {

float:right;

padding-top:26px;

}

.menu a:link, .menu a:visited, .menu a:active, .menu a:hover {

background-color:inherit;

color:#666666;

display:block;

float:left;

margin:0pt 5px 0pt 0pt;

padding:4px 8px;

text-decoration:none;

}

.navPanel {

background:#E5E2DE url(images/bg_mid.png) repeat-x scroll left top;

border-bottom:1px solid #CBC6BC;

border-top:1px solid #DAD6CB;

color:inherit;

line-height:200%;

}

.innerNavPanel {

margin:0pt auto;

width:750px;

}

.buttons {

border-left:1px solid #DAD6CB;

line-height:200%;

overflow:hidden;

white-space:nowrap;

width:99%;

}

.buttons a:link, .buttons a:active, .buttons a:visited, .buttons a:hover {

background:#F4FBE1 url(images/bg_btn.png) repeat scroll 0%;

border-left:1px solid white;

border-right:1px solid #DAD6CB;

color:#F0F8FF;

display:block;

float:left;

padding:4px 20px;

text-decoration:none;

}

.buttons a:hover {

background:#F4FADF url(images/bg_btn_hover.png) repeat-x scroll left top;

color:#395500;

}

.buttons-special {

font-weight:bold;

}

.buttons-active {

background:#FFF1BB url(images/bg_btn_active.png) repeat scroll 0% !important;

color:#993300 !important;

}

.buttons .label {

background-color:inherit;

color:#645A44;

display:block;

float:left;

overflow:hidden;

padding:4px 20px;

}

.buttons .label a:link, .buttons .label a:active, .buttons .label a:visited, .buttons .label a:hover {

border:medium none;

color:inherit;

display:inline;

float:none;

font-weight:bold;

height:auto;

padding:0pt;

text-decoration:underline;

}

.innerHeader, .innerFooter, .contentWrapper {

margin:0pt 20px;

min-width:610px;

width:auto;

}

.navPanel {

padding:0pt 20px;

}

.innerNavPanel {

margin:0pt;

width:100%;

}

.navstrip {

background-color:inherit;

color:#999999;

font-size:12px;

font-weight:bold;

margin:0pt 0pt 10px;

padding:14px 0pt 8px;

}

* html .buttons img {

float:left;

margin:5px 5px 5px 0pt;

}

.shadowStrip {

background:transparent url(images/bg_shadow.png) repeat scroll 0%;

font-size:1%;

height:4px;

line-height:1%;

}

form {

display:inline;

margin:0pt;

padding:0pt;

}

hr {

border-bottom:1px solid #FFFFFF;

border-top:1px solid #0076CD;

height:1px;

margin:3px;

}

td {

font-family:Tahoma,Verdana,Helvetica,sans-serif,Arial;

font-size:11px;

}

pre {

font-family:Verdana,Arial,Helvetica,sans-serif;

font-size:11px;

}

.alt {

background:inherit inherit inherit inherit inherit;

color:#4F7500;

}

.footer {

background-color:#FFFFFF;

border:1px solid #3E9DDA;

color:#888888;

font-family:Verdana,Arial,Helvetica,sans-serif;

font-size:11px;

padding:5px;

}

input, select {

vertical-align:middle;

}

.button {

background:#F4FBE1 url(images/bg_input_btn.png) repeat scroll 0%;

border:1px solid #ABA498;

color:#645A44;

margin-bottom:1px;

margin-top:1px;

padding:2px 5px;

text-decoration:none;

vertical-align:middle;

}

.button:hover {

background:#F4FADF url(images/bg_input_btn_hover.png) repeat scroll 0%;

border:1px solid #80AA00;

color:#395500;

}

label {

cursor:pointer;

}

.textbox {

background:white url(images/bg_input_text.png) repeat-x scroll left top;

border:1px solid #C0BBB4;

color:inherit;

padding:2px 3px;

vertical-align:middle;

}

.textbox:hover {

background:white url(images/bg_input_text_hover.png) repeat-x scroll left top;

border:1px solid #F0F8FF;

color:inherit;

}

.main-body {

background-color:#FFFFFF;

color:#555555;

font-family:Verdana,Tahoma,Arial,helvetica,serif;

font-size:70%;

padding:3px;

}

.side-body {

background-color:#F0F8FF;

color:#645A44;

font-family:Verdana,Tahoma,Arial,helvetica,serif;

font-size:70%;

padding:4px;

}

.main-bg {

background-color:#FFFFFF;

color:#555555;

padding:5px;

}

.border {

background-color:#FFFFFF;

border:1px solid #CEC8B9;

color:#111111;

}

.side-border-left {

border-right:0pt solid #CEC8B9;

padding:5px;

}

.side-border-right {

border-left:0pt solid #CEC8B9;

padding:5px;

}

.news-footer {

background-color:#E4E3DA;

border-top:1px solid #CEC8B9;

color:#555555;

font-size:70%;

padding:3px 4px 4px;

}

.news_articles {

background:#F0F8FF url(images/tcat.gif) repeat-x scroll left top;

border-bottom:1px solid #CEC8B9;

color:#000000;

font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;

font-size:10pt;

font-size-adjust:none;

font-stretch:normal;

font-style:normal;

font-variant:normal;

font-weight:bold;

height:32px;

line-height:normal;

padding:4px 0pt 4px 8px;

}

.p_title {

background:#F0F8FF url(images/tcat.gif) repeat-x scroll left top;

border-bottom:1px solid #CEC8B9;

color:#000000;

font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;

font-size:10pt;

font-size-adjust:none;

font-stretch:normal;

font-style:normal;

font-variant:normal;

font-weight:bold;

height:32px;

line-height:normal;

padding:4px 0pt 4px 8px;

}

.p_title_box {

background:#F0F8FF url(images/tcat.gif) repeat-x scroll left top;

border-bottom:1px solid #CEC8B9;

color:#000000;

font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;

font-size:10pt;

font-size-adjust:none;

font-stretch:normal;

font-style:normal;

font-variant:normal;

font-weight:bold;

line-height:normal;

padding:4px;

}

.tbl-border {

background-color:#CEC8B9;

color:#555555;

}

.tbl {

background-color:#F1F0EB;

color:#555555;

font-size:11px;

padding:3px 4px;

}

.tbl1 {

background-color:#F1F0EB;

border-color:#FFFFFF rgb(226, 222, 214) rgb(226, 222, 214) rgb(255, 255, 255);

border-style:solid;

border-width:1px 0pt 0pt 1px;

color:#555555;

font-size:11px;

padding:4px;

}

.tbl2 {

background-color:#EDECE7;

border-color:#FFFFFF rgb(226, 222, 214) rgb(226, 222, 214) rgb(255, 255, 255);

border-style:solid;

border-width:1px 0pt 0pt 1px;

color:#555555;

font-size:11px;

padding:4px;

}

.forum-caption {

background:#F0F8FF url(images/forum_cell_bg.png) repeat-x scroll left top;

color:#6E6EE8;

font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;

font-size:10pt;

font-size-adjust:none;

font-stretch:normal;

font-style:normal;

font-variant:normal;

font-weight:bold;

height:32px;

line-height:normal;

padding:2px 4px 2px 6px;

}

.quote {

background-color:#F0F5FA;

border-color:#C2CFDF;

border-style:solid;

border-width:1px 1px 1px 5px;

color:#333333;

margin:0pt 5px;

padding:4px;

}

code {

background-color:#F0F5FA;

border:0pt none;

color:#2C404B;

display:block;

font-size:130%;

margin:0pt;

overflow:auto;

padding:0pt 0pt 4px;

}

.poll {

border:1px solid #CEC8B9;

height:14px;

padding:1px;

}

.comment-name {

background:inherit inherit inherit inherit inherit;

color:#557B07;

font-family:Tahoma,Arial,helvetica,serif;

font-weight:bold;

}

.shoutboxname {

background-color:#F0F8FF;

color:#557B07;

font-weight:bold;

}

.shoutbox {

background-color:#F0F8FF;

color:#47391C;

}

.shoutboxdate {

background-color:#F0F8FF;

color:#888888;

font-family:verdana,tahoma,arial,sans-serif;

font-size:9px;

font-size-adjust:none;

font-stretch:normal;

font-style:normal;

font-variant:normal;

font-weight:normal;

line-height:normal;

}

.smallalt {

font-size:11px;

font-weight:normal;

}

.small {

font-size:11px;

font-weight:normal;

}

.small2 {

color:#645A44;

font-family:verdana,tahoma,arial,sans-serif;

font-size:9px;

font-size-adjust:none;

font-stretch:normal;

font-style:normal;

font-variant:normal;

font-weight:normal;

line-height:normal;

}

.side-small {

background-color:#FFFFFF;

color:#555555;

font-size:11px;

font-weight:normal;

}

.side-label {

background-color:#FFFFFF;

color:#645A44;

padding:2px 2px 3px;

}

.side {

background-color:#FFFFFF;

color:#645A44;

}

 

 

It seems to be here with the float, but cant be 100% sure

 

 

.header {

background:#EEF4FD url(images/bg_header.png) repeat-x scroll left top;

color:inherit;

height:5px;

}

.title {

float:left;

margin-top:16px;

}

.title img {

float:left;

margin-right:6px;

}

.title_header {

font-size:125%;

font-weight:bold;

margin:0pt;

padding:7px 0pt 0pt;

}

Link to comment
Share on other sites
haku Regular Member

haku

Posted
Posted

Posting a whole bunch of code without a specific explanation of the problem you are having won't get you much help. It's better if you explain what you want to happen, and what is actually happening.

 

On top of this, CSS without the relevant XHTML is pretty much pointless, as we can't see what the CSS refers to.

As well, a link is your best bet, as we can see it live in both browsers and play with it.

 

And finally, IE is not standards compliant, so if you create code for IE and then try to fix it for FF and other browsers, it will only give you headaches. You are much better off coding for FF (or a different standards-compliant browser) and then adding conditional comments for IE in order to make it work. Even though this means you are going to have to scrap a lot of what you have and recode for FF, trust me when I tell you that this will make your life significantly easier in the end.

Link to comment
Share on other sites
dbrimlow Member

dbrimlow

Posted
Posted

Hi, NSW42

 

Don't take this personally, but that css looks pretty nasty in places.

 

First, you don't need to declare default font attributes like:

 

font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;

 

These are a default condition UNLESS you are in a parent where these elements are indeed set to something OTHER THAN the normal default condition.

 

Second, if you set the body font-size to be relational (a sound practice in general), then STAY relational throughout!

 

Using pixel based font-sizing thereafter is defeating the whole point of relational sizing - either continue to use percentage based or use em based.

 

You even go to the furthest extreme and use points!! Stop that! LOL!

 

pt font sizing should ONLY ever be used for css printed output, not Screen output.

 

As to your problem, like haku says, we need to see the html as well in order to help.

 

 

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.