• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 262
  • Last Modified:

CSS cross-browser issues

The code below is from the external css I am using. The following link looks good on a PC with IE7: http://www.go-mdi.com/test/pancor2/contact/contact.htm. On a Mac with Safari or Firefox, not so good. Also in Safari on the PC it also looks off.

I am using Dreamweaver CS3. What do I have coded wrong in the CSS?
@charset "utf-8";
.K_10pt {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #000000;
}
.K_14ptBold {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #000000;
}
img { 
	border: none; 
} 
 
.leftSideDkBlueSubHead {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #002858;
	margin-bottom: -10px;
	line-height: normal;
}
.leftSideOrange {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #D7572E;
	margin-bottom: -15px;
	line-height: normal;
}
.leftSideDkBlue {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11.5px;
	font-weight: bold;
	color: #002858;
	margin-bottom: -10px;
	line-height: normal;
}
 
.leftSideDkBlueLastline {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11.5px;
	font-weight: bold;
	color: 002858;
	margin-bottom: 0px;
	line-height: normal;
}
 
a:link {color:#002858; text-decoration: none} /* unvisited link */
a:visited {color:#002858} /* visited link */
a:hover {color:#002858; text-decoration: underline} /* mouse over link */
a:active {color:#002858} /* selected link */

Open in new window

0
msukow
Asked:
msukow
  • 2
  • 2
1 Solution
 
Eternal_StudentCommented:
I just checked that link in FF and IE7 and get the same results? Can you be a bit more specific with your question. I did notice there is an error in your CSS here:

.leftSideDkBlueLastline {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11.5px;
        font-weight: bold;
        color: 002858;
        margin-bottom: 0px;
        line-height: normal;
}

The color value is missing a #
0
 
msukowAuthor Commented:
I attached the screen shots to show what I mean. There is one for safari, one for Firefox and one that shows what it should look like.
css.zip
0
 
Eternal_StudentCommented:
I see what you mean now ... this has to do with paragraphs and the way different browsers interpret their margins. The best way around this is to set the ALL paragraph margins to zero:

p{margin:0}

Then adjust them accordingly:

.leftSideDkBlueSubHead {margin:8px 0;}

You have used negative margin values so you will have to change them now.
0
 
msukowAuthor Commented:
Your answer was wonderful - being new to more advanced CSS, I have been leary implementing it as much as I should
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now