Small browser compatibility issues

Hey guys,

I got few basic comparability issues with CSS. Or maybe I’m just doing something wrong, so feel free to correct it.

  1. 3 column header. I’ve setup 3 column header to have different things in each. FF and Chrome work fine, IE8 won’t line everything up as it supposed to:
/*********** header box ***************/
#headerbox{width:953px;height:80px;margin:0;display:block;margin:0 auto;}
#headerbox #lhbox{width:300px;height:80px;margin:0;display:block;text-align:left;vertical-align:middle;float:left;}
#headerbox #lhbox img{width:245px;height:65px;margin:0;vertical-align:middle;border:0;margin-top:5px;}
#headerbox #chbox{width:353px;height:80px;margin:0;display:block;vertical-align:middle;float:left;}
#headerbox #rhbox{width:300px;height:80px;margin:0;display:block;text-align:right;vertical-align:middle;float:right;}
/********** header box end ***********/
  1. Small issue with rounded corners in FF. It works fine in Chrome, but FF and IE won’t round my corners.
#sampleform4 {margin-bottom:5px;}
#sampleform4 h2 {position:absolute; left-9999px; top:-9999px;}
#sampleform4 input {vertical-align:middle; font-weight:bold; font-size: 12px; -moz-
border-radius:4px; -webkit-border-radius:4px; border-radius:4px; color:#48494c;}
#sampleform4 input[type="text"] {width:186px !important; padding:5px 85px 5px 5px; 
background:transparent; border:1px solid #48494c;}
#sampleform4 input[type="submit"] {width:80px; margin-left:-87px; padding:3px; 
border:none; color:#444547;background: #889399;cursor:pointer;-moz-border-radius:2px; 
-webkit-border-radius:2px;border-radius:2px;text-shadow: 0 0 18px #fafafa; }
#sampleform4 input[type="submit"]::-moz-focus-inner {border:0;}
#sampleform4 input[type="submit"]:focus {background:#333;}
#sampleform4 input[type="submit"]:hover {filter:alpha(opacity=90);-moz-opacity:0.9;-
khtml-opacity: 0.9;opacity: 0.9;}

Really appreciate your help!

I’m sure many would like to help. It’s just that, w/o the html markup and the rest of the CSS declarations, no one can guess what you actually have there. Especially since you have things like: display:block; float:left; in the same declaration.

A live page or a complete HTML markup along with a complete CSS set of declarations (for the actual page or just for a test page to illustrate your problem) could make a difference in getting or not an answer :slight_smile:

Thanks for letting me know. Here’s the HTML involved here:

      <div id="headerbox">
			<div id="lhbox"><a href="#"><img src="jobsad.jpg" alt="jobs ad" width="265" height="65" /></div>

			<div id="chbox">
				<a href="<?php echo get_option('home'); ?>/"><?php if ($wpzoom_misc_logo_path) { ?><img src="<?php echo "$wpzoom_misc_logo_path";?>" alt="<?php bloginfo('name'); ?>" /><?php } else { ?><img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo.png" alt="<?php bloginfo('name'); ?>" /><?php } ?></a>
			<!-- subscription box -->
 <div id="rhbox">
<span class="emaillabel">Sign up for daily updates sent to your inbox</span>
<form action="#" method="post" id="sampleform4" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<h2><label for="email">SUBSCRIBE</label></h2>
<input type="text" value="" name="EMAIL" class="required email" id="email" >
<input type="submit" value="SUBSCRIBE" name="subscribe" id="searchsubmit">
<div style="margin-left:27px;">
<div class="topconnect">
<a href="#" target="_blank" title="Like us on Facebook"><img src="facebook2.png" alt="Like us on Facebook" /></a>
<a href="#" target="_blank" title="Follow us on Twitter"><img src="twitter2.png" alt="Follow us on Twitter" /></a>
<a href="#" target="_blank" title="Follow us on Digg"><img src="digg2.png" alt="Follow us on Digg" /></a>
<a href="#" target="_blank" title="Subscribe to RSS feed"><img src="rss2.png" alt="Subscribe to RSS feed" /></a>
<span><a href="#" title="More subscription options">More subscription options</a></span>

Really appreciate your help.

A good step forward. But you have dynamic content (php). I’m not sure about that part. It can be somethig wrong there, and, since the page is not live, one can’t properly test.

Set up a static version and see if the problem persists.

Ok, will do. It inserts an image logo with link, that’s all. Will post what happens with static version.

Here’s the static version:

Is the a reason why input length is different in static version compared to being in php file?

The two main problems I still see, FF won’t round the corners even though I used -moz. In IE, the main headerbox isn’t centered horizontally (margin: 0 auto;). And on top, there’s no styling for inputs.

Chrome looks fine across the board.

Any way to approach this situation? Thanks, I appreciate the help!

See above. Sorry for one line, didn’t know. I saw a lot of people do that, so I figured its a good practice. Guess not :smiley:

It might be an issue with your #headerbox not containing your floats properly.

This may make it collapse in height, giving an issue with the centering?

Also, as a note, you may want to include a browser reset before anything. Many browser-specific default stylings will muck with your layout if not reset.

This is the reset css already in my CSS file:

0. CSS Reset  -------------------------  All Theme Files

* {

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;

table {
border-collapse: collapse;
border-spacing: 0;

fieldset, img {border: 0;}

address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;

ol, ul {list-style-type: none; list-style-position:inside;}
caption, th {text-align: left;}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;

q:before, q:after {content: '';}
abbr, acronym {border: 0;}

img { behavior: url(; }

/* Global reset-RESET */
/* The below restores some sensible defaults */
strong { font-weight: bold }
em { font-style: italic }
a img { border:none } /* Gets rid of IE's blue borders */

table { -x-system-font: none; font-family: inherit; font-size: inherit; font-size-adjust: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; width: 100%; }
th {  background: #BBCCDD; color:#333; }
th, td { line-height: 20px; padding: 4px; }
tr:nth-child(2n) {  background: rgba(0, 0, 0, 0.1) none repeat scroll 0 0; }
tr:nth-child(2n+1) {  }

About the floats, how can I fix them? Can you point me in the right direction or resource?


Sorry, I can’t see your dropbox file (blocked at work), so I was only going by the CSS you placed in here.

For containing floats:

I would probably suggest using the clearfix, as much as I dislike adding extra non-semantic markup.

Oh, here it is on my own domain.

I’m about to read through the link you gave me.

Thanks again!

One problem down, one more to go.

I’ve added clearfix and apparently IE did not like me setting height for my divs, so I removed it and now 3 divs align good within the main div in IE.

The other problem I had was round corners in FF and IE.

#sampleform4 {margin-bottom:5px;}
#sampleform4 h2 {

#sampleform4 input {
font-size: 12px; 

#sampleform4 input[type="text"] {
width:186px !important; 
padding:5px 85px 5px 5px; 
border:1px solid #48494c;}

#sampleform4 input[type="submit"] {
background: #889399;
text-shadow: 0 0 18px #fafafa; }

#sampleform4 input[type="submit"]::-moz-focus-inner {border:0;}

#sampleform4 input[type="submit"]:focus {background:#333;}

#sampleform4 input[type="submit"]:hover {
-khtml-opacity: 0.9;
opacity: 0.9;}

Reposted it for easier debugging. See attached screenshot where all three browsers compared to see the differences I’m talking about.

I’m not sure why FF is not rendering round corners if if I did use -moz. I’m not too worried about IE not sure if it supports round corners, but it would be nice if there’s a way.

Thanks so much for your help!

Did you update the html on your website? it doesn’t seem to have the #sampleform4 input { -moz-border-radius: } on it.

But when I added it via firebug, it worked fine.

There are ways of adding support for CSS3 properties in IE using javascript, such as CSS3 PIE

Yes, you have -moz-border-radius, just that you have a line feed between -moz- and border-radius. A solution:

#sampleform4 input {vertical-align:middle; font-weight:bold; font-size: 12px;
 -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; color:#48494c;}

but you should learn not to break in-mid property’s name and you should learn how to apply a proper formatting. I don’t know where this formatting of yours comes from, but it’s not done right. You have more similar bad examples in the same <style> element.

As for CSS3 round corners, there is no support in IE for that.

Oh wow, didn’t know that. I pulled that code from an article online on how to do that. I’ve fixed formatting and will keep that in mind writing my own CSS. It did fix the round corners in FF. Thanks for PIE, will look into it.

Last small detail, why does FF render SUBSCRIBE text bigger than Chrome and IE?

Thanks a lot for all your help!

In FF you have font-family:MS Shell Dlg; and in Ch font-family: Arial; as the computed font family.

Set a consistent font family. And set a DTD, as IE will be thrown in quirks mode making your page behave strangely.

And you’re welcome :slight_smile:

My DTD is XHTML 1.0 Transitional. I specified the font for that input and it fixed it. Awesome!

Thanks so much for the help and lesson on formatting :smiley:


You don’t have any DTD on the so I thought it’s worth mentioning :slight_smile:


No problem :slight_smile: