CSS - Small Fonts In Chrome Vs. Safari / Firefox

Hi All,

I am new to this forum and to CSS and Web Development as a whole. I am a notch up from "total n00b".

I can't post links so the website is www (dot) authenticimpressions (dot) com

I built this site for my wife using Wordpress, some plugins, and some themes I bought. The Galleries all look great in Chrome and Firefox on PC, and in Firefox and Safari on Mac. But in IE7 on PC, I get a 4 or 5px white border on the bottom and the left in each of the galleries. I've played and played with the stylesheets and cannot figure this one out.

What other information should I post or provide to get some help?

Thanks in advance, I really appreciate it.

Hello All,
I have an image with a text label to the right that is linked. Now, I want a little whitespace between the image and the text, so that the text doesn't butt up right against the image. To accomplish this, I could use a non-breaking space ( ) However, the space then becomes part of the link and it gets underlined. So, by adjusting the image's margin (or padding) CSS, I can achieve the desired result... at least in Internet Explorer.
Firefox/Safari/Chrome seem to underline a linked image's margin as well. I tried using "padding" CSS instead, but produced the same result.

How can I get Firefox/Safari/Chrome to underline JUST the text in a link, and not the image (and it's margin) as well?

This is how the code is displayed in IE:
http://img407.imageshack.us/img407/2360/pfieeu9.jpg

Firefox/Safari/Chrome:
http://img407.imageshack.us/img407/5421/pffirefoxvv1.jpg


You can see the little extra "nubbin" of underline between the icon image and the text.

CSS:
Code:

a.red10ullink:link	     {color: #a80000;
		     font-size: 10pt;
		     font-family: arial;
		     text-decoration: underline;}

a.red10ullink:visited    {color: #a80000;
		     font-size: 10pt;
		     font-family: arial;
		     text-decoration: underline;}

a.red10ullink:hover     {color: #333333;
		     font-size: 10pt;
		     font-family: arial;}

img.icon    {vertical-align: middle;
               border-width: 0px;
               margin: 0px 5px 0px 0px;}

HTML:
Code:

<a href="somepage.html" class="red10ullink"><img src="icon_pf.gif" alt="" width="20" height="20" class="icon" />Printer Friendly</a>

Thanks!

Hey guys, I'm in need of some help here.

Okay, so. My site looks the way I want so far on google chrome and safari (mac). And right now I'm at the stage of getting it to display like the two.

If anyone who decides to help doesn't have access to certain browsers, I'll further explain, but I think it's easiest said to see for yourself.

Right now I'm focusing on ie6, ie7, ff3. The markup in some areas is whacky, I know, but I decided to pick up where I left off on this project (which I first began building awhile ago) instead of starting completely over with a good template.

http://thecheckoutplace.com/compute...eOneNetbook.php

If anyone can offer a hand, it means a lot. Cheers guys.

Hi Guys

I am struggling to resolve a small issue i am having. I am using a mac, and am working on a contact form for a website.

I am using the latest mac OS and latest versions of all browsers.

The following link is fine in firefox, however, in Safari and google chrome, the 'Message' text area has a big gap above it and I do not know how to get rid of this.

Here is the code for the form...

<form id="form" name="frmQuote" class="contactForm" method="post" action="process.php" onsubmit="return validate_form(this);" >


<ul>
<li>
<label for="name">Name:</label>
<input name="name" id="name" type="text" class="required" />
</li>




<li>
<label for="email">E-mail:</label>
<input name="email" id="email" type="text" class="required email" />
</il>


<li>
<label for="subject">Subject:</label>
<input name="subject" id="subject" type="text" class="required" />
</li>

<li>
<label for="detail">Message:</label>
<textarea name="detail" id="detail" rows="6" cols="60" class="required"></textarea>
</li>


<li>
<input type="submit" name="submit" id="submit" value="Submit" tabindex="100" class="submitBtn" />
</li></ul>

</form>

Here is the css for that page...

#content_about {
color: #666666;
}



/***************************************************
CONTACT
***************************************************/
#form {
margin: 0px;
position: relative;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 15px;
float: left;
}
#form div {
width: 510px;
position: relative;
float: left;
padding-bottom: 9px;
}
#form div label {
width: 400px;
}
#form div label.error {
color: #a80000;
position: absolute;
top: 0px;
right: 0px;
text-align: right;
font-size: 11px;
}
#form div.message_sent {
background-color: #31B8DA;
width: 890px;
float: left;
padding: 10px;
margin-bottom: 15px;
color: #FFFFFF;
}
#form input {
width: 499px;
padding: 8px;
font-size: 13px;
color: #999999;
background-color: #FFFFFF;
float: right;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #C3C3C3;
border-right-color: #E8E8E8;
border-bottom-color: #E8E8E8;
border-left-color: #C3C3C3;
}
#form input:focus, #form textarea:focus {
background-color: #F4F4F4;
}
#form textarea {
width: 500px;
padding: 8px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #FFFFFF;
color: #aaaaaa;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #C3C3C3;
border-right-color: #E8E8E8;
border-bottom-color: #E8E8E8;
border-left-color: #C3C3C3;
float: right;
margin: 0px;
}
#form .submitBtn {
background-color: #31b8da;
width: 95px;
color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding: 0px;
font-size: 16px;
height: 35px;
display: block;
margin-top: 20px;
}
#form .submitBtn:hover {
background-color: #1F93B4;
color: #FFFFFF;
}
#form .submitBtn:focus {
background-color: #4FC1E1;
}

#form strong {
font-size: 24px;
color: #FFFFFF;
font-weight: normal;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #6a6a6a;
display: block;
}
#form .font-11 {
font-size: 11px;
color: #CCCCCC;
display: inline;
}
#content_about #form li label {
margin-top: 0px;
margin-right: 35px;
margin-bottom: 0px;
margin-left: 0px;
line-height: 30px;
}
#content_about #form li {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 0px;
}


Any help would be greatly appreciated.

Regards

Jay

Hi everyone,

I am new to the forum. I am new to CSS and just trying to learn as much as i can as i go. I am currently working on a website and having a small problem with my drop down menus. It works great in Firefox, but in Safari when i hover over the drop down, it shifts to the left by a few pixels. I haven't added the IE workaround yet because i wanted to get this sorted before doing that so it won't work in IE yet.

I would post a link but can't because i'm too new.

I'm new to this, so be kind on my coding

The code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Center test - "text-align: center" set for body, "text-align: left" for containing div</title>
	<style type="text/css" media="screen">
body		
		{
			margin: 0;
			padding: 0;
			text-align: center;
		}
		
div#container		
		{
	
	width: 100%;
	
	background-color: #EAFBFF;
	width:760px;
	height:220px;
	text-align: left;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #0066FF;
	border-right-color: #0066FF;
	border-bottom-color: #0066FF;
	border-left-color: #0066FF;
		}
div#container2		
		{
	width: 760px;
	background-color: #ddd;
	width:760px;
	text-align: left;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #0033FF;
	border-right-color: #0033FF;
	border-bottom-color: #0033FF;
	border-left-color: #0033FF;
	padding-top: 15px;
	padding-bottom: 15px;
		}
div#container3		
		{
	width: 760px;
	background-color: #666666;
	width:760px;
	text-align: left;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #0033FF;
	border-right-color: #0033FF;
	border-bottom-color: #0033FF;
	border-left-color: #0033FF;
	padding-top: 13px;
	padding-bottom: 10px;	
		}
#container {
}
    #Layer1 {
	position:absolute;
	width:760px;
	height:115px;
	z-index:1;
	left: 405px;
	top: 102px;
	background-color: #0000FF;
	overflow: scroll;
}
#container2 {
}
    #Layer2 {
	position:relative;
	width:760px;
	height:600px;
	z-index:1;
	left: 405px;
	top: 102px;
	background-color: #0000FF;
	overflow: scroll;
}
#container4 {
	font-family: Arial, Helvetica, sans-serif;
	width: 500px;
	font-size: 14px;
	font-style: normal;
	color: #DDDDDD;
	text-decoration: none;
	text-align: left;
	margin-right: 110px;
	margin-left: 125px;
	background-color: #999999;
	border: thin solid #999999;
	padding-left: 15px;
}


    #Layer3 {
	position:relative;
	width:200px;
	height:600px;
	z-index:1;
	left: 405px;
	top: 102px;
	background-color: #0000FF;
	overflow: scroll;
}
    .style1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
}
    .style2 {
	font-family: Arial, Helvetica, sans-serif; 
	color: #FFFFFF;
}


    #navbar {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: none;
	background-color: #666666;
	margin: 0px;
	padding: 0px;
	height: 20px;
}
    #navbar ul {
	padding: 0;
  	margin: 0;
  	list-style: none;

}
    #navbar li {
	float: left;
	text-align: center;
	background-color: #666666;
  	position: relative;
  	width: 130px;
}
	#navbar li ul{
	position: absolute;
	display: none;
	text-align: center;
	line-height: 25px;
	padding-top: 7px;
}
	#navbar li > ul {
	top: auto;
	left: auto;
}
	#navbar li:hover ul { 
	display:block;
	text-align: center;
	text-indent: 0;
}
	#content {
	clear: left;
}

    
    #mainphoto {
	padding: 0px;
	float: right;
	border: 1px solid #0066FF;
	margin-top: 20px;
	margin-right: 30px;
	margin-bottom: 30px;
	margin-left: 30px;
}
    
    #container6 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	text-decoration: none;
	padding-right: 30px;
	padding-left: 30px;
}
    .style3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000000;
}
    .style4 {color: #000000}
.style5 {font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; }
    a {
	font-size: 12px;
	color: #FFFFFF;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
a:hover {
	text-decoration: none;
	color: #CC6600;
}
a:active {
	text-decoration: none;
	color: #CCCCCC;
}
    </style> 
</head>
<body>
<div id="container">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="(URL address blocked: See forum rules)=7,0,19,0" width="760" height="220">
    <param name="movie" value="(URL address blocked: See forum rules)">
    <param name="quality" value="high">
    <embed src="(URL address blocked: See forum rules)" quality="high" pluginspage="(URL address blocked: See forum rules)" type="application/x-shockwave-flash" width="760" height="220"></embed>
  </object>
</div>
<div class="style2" id="container3">
<div id="navbar">
<ul>
  <li><a href="(URL address blocked: See forum rules)">Home</a></li>
  
   <li>About the Office
    <ul>
      <li><a href="">Meet Dr. Toolson
        </a></li>
      <li><a href="">Meet the Team</a></li>
      <li><a href="">Office Tour</a></li>
	  <li><a href="">Location</a></li>
    </ul>
  </li>
  
  <li>About Orthodontics
    <ul>
      <li><a href="">Adults</a></li>
      <li><a href="">Children</a></li>
		</ul>
	</li>

  <li>Life with Braces</li>

  <li>Contact Us
    <ul>
	  <li><a href="">Contact Information</a></li>
      <li><a href="">Request Appointment</a></li>
	  <li><a href="">Location</a></li>
    </ul>
  </li>
</ul>
  </div>
</div>
<div id="container2">
  <div id="container4">
    <p class="style3">Contact Information Form</p>
	
    <form action="(URL address blocked: See forum rules)" method="post" class="style4">
      <span class="style1">
      <label>Name
        <br>
        <input type="text" name="Name">
      </label>
      </span>
    
      <span class="style1">
	  <br>
	  <br>
      <label>Email
        <br>
        <input type="text" name="Email Address">
      </label>
      </span>
    
      <span class="style1">
	  <br>
	  <br>
      <label>Phone Number
        <br>
        <input type="text" name="Phone Number">
      </label>
      </span>
   
        <span class="style5">
		<br>
		<br>
        <label><span class="style4">Description (if neccessary)</span> </label>
      </span>
        <span class="style4">
		
        </span>
	
      <label><br>
        <textarea name="Description" rows="5"></textarea>
      </label>
  
    
      <label>
	  <br><br>
      <input name="Submit" type="submit" class="style1" value="Submit">
      </label>
      <label>
      <input name="Reset" type="reset" class="style1" id="Reset" value="Reset">
      </label>
      <input name="recipient" type="hidden" id="recipient" value="jeff@dinorestoration.com">
	  
	  <input name="redirect" type="hidden" id="redirect" value="(URL address blocked: See forum rules)">  
    
	</form>
  </div>
</div>
  
<div class="style1">
Copyright Toolson Orthodontics 2009 </div>
<p>&nbsp;</p>

</body>
</html>