Small browser compatibility issues

V1ktor · December 6, 2010, 12:32pm

Hey guys,

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

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 ***********/

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!

system · December 6, 2010, 2:00pm

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

V1ktor · December 6, 2010, 2:08pm

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>
			</div>
			
	 
			<!-- 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">
</form>
<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>
</div></div>
 </div></div>

Really appreciate your help.

system · December 6, 2010, 2:11pm

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.

V1ktor · December 6, 2010, 2:14pm

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

V1ktor · December 6, 2010, 2:28pm

Here’s the static version:
http://dl.dropbox.com/u/9104250/test-css.html

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!

V1ktor · December 6, 2010, 2:30pm

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

materialdesigner · December 6, 2010, 2:42pm

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.

V1ktor · December 6, 2010, 2:49pm

This is the reset css already in my CSS file:

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

*********************************************************************************************/   
* {
margin:0;
padding:0;
}

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(iepngfix.htc); }


/* 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?

Thanks.

materialdesigner · December 6, 2010, 2:54pm

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:

http://www.visibilityinherit.com/code/contain-floats.php

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

V1ktor · December 6, 2010, 2:57pm

Oh, here it is on my own domain.
http://dev.viktorix.com/blog/test-css.html

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

Thanks again!

V1ktor · December 6, 2010, 3:50pm

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 {
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;}

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!

materialdesigner · December 6, 2010, 4:04pm

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 http://css3pie.com/

system · December 6, 2010, 4:09pm

V1ktor:

The other problem I had was round corners in FF and IE.
#sampleform4 input {vertical-align:middle; font-weight:bold; font-size: 12px;[COLOR="Red"] -moz-[/COLOR]
border-radius:4px; -webkit-border-radius:4px; border-radius:4px; color:#48494c;}
I’m not sure why FF is not rendering round corners if if I did use -moz.!

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.

V1ktor · December 6, 2010, 4:25pm

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!

system · December 6, 2010, 4:35pm

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

V1ktor · December 6, 2010, 4:48pm

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

Thanks.

system · December 6, 2010, 4:53pm

You don’t have any DTD on the http://dev.viktorix.com/blog/test-css.html so I thought it’s worth mentioning

V1ktor · December 6, 2010, 4:55pm

Thanks!

system · December 6, 2010, 4:57pm

No problem