Jump to content
Killersites Forums

Problem with css in firefox


derange
 Share

Recommended Posts

I have a small but troubelsome problem.....

 

I get this spaces in firefox that i do not get i IE6

( http://www.flytillbrasilien.se/blipor/index.html )

How do i rewrite it so it will work on both?

I have walidated it so there is no problems there ( http://jigsaw.w3.org/css-validator/#validate-by-input )

 

This is the code today

 

/** BASIC */

 

body {

margin: 0px 0px 0px 0px;

background-image: url(images/blibackground.jpg);

text-align: justify;

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

font-size: 11px;

color: #274690;

 

}

 

h1 {

font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

font-size: 32px;

font-weight: normal;

letter-spacing: 0px;

text-transform: none;

}

h2, h3, h4, h5, h6 {

font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;

font-size: 22px;

font-weight: normal;

color: #274690;

text-transform: none;

letter-spacing: 0px;

}

 

ul {

margin-left: 0px;

padding-left: 0px;

list-style-type: none;

}

 

a {

color: #274690;

}

 

a:hover {

text-decoration: none;

}

 

/** HEADER */

 

#header {

width: 950px;

height: 143px;

margin: 0px auto;

background: #ffffff url(images/logga.jpg);

}

 

 

/** MENU */

 

#menu {

width: 950px;

height: 30px;

margin: 0px auto;

background: url(images/img03.jpg) repeat-x left top;

}

 

#menu ul {

margin: 0px;

padding: 0px;

list-style: none;

}

 

#menu li {

display: none;

}

 

 

/** CONTENT */

 

#content {

width: 950px;

margin: 0px auto;

background: url(images/img04.gif) repeat-y left top;

}

 

#columnA {

float: right;

width: 440px;

padding: 20px;

}

 

#columnB {

float: left;

width: 180px;

padding: 20px 20px 0px 20px;

}

 

#columnB h2 {

font-size: large;

}

 

/** FOOTER */

 

#footer {

width: 950px;

margin: 0px auto;

background: #ffffff url(images/fot.jpg);

}

Link to comment
Share on other sites

These are all the rules that should fix that. Pick which ever one applies to your code. Each work in some situations while each don't work in others. I just messed with it in firebug - font-size:0; on the menu seems to fix the menu, and overflow:hidden on the footer seems to fix the footer. But test all in each.

 

img {

vertical-align:bottom;

}

img {

display:block;

}

div {

font-size:0;

}

div {

overflow:hidden;

}

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  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.

Loading...
 Share

×
×
  • Create New...