|
CSS - Ie8 Renders Differently Than Ie7
I had a similar problem earlier this week and it turned out to be solved by changing the encoding of my php files to ASCII instead of the default UTF-8 set by MS Expression Web.
The problem I have now is that one of my pages looks wrong in IE7. The same page looks fine in IE8, FireFox 3, Chrome, Opera, and Safari. This is what it looks like in IE7: This is what it looks like in IE8 and all the other browsers mentioned above: The page can be seen he http://dev.asbco.com/products/commercialindustrial/ Any help is greatly appreciated! Thanks! Similar TutorialsI am working on a development site (http://dev.asbco.com/products/commercialindustrial/ ) and I am getting different looks in Safari and Chrome. IE8/FireFox 3/Opera all render the page correctly, Safari and Chrome are off. Any ideas how to fix this issue? Thanks! [EDIT] I meant Safari and Chrome not Safari and FireFox 3. has anyone every had css render different on diffrent hosts? I have a small website which i tested on firefox 1.6 and IE6 locally. When i upload it, some things change, my nav <li>'s become narrower and images dont fit on 1 line anymore? any ideas what can cause such behaviour? Am I missing some syntax here? In IE this image won't show up, in Firefox no problem. <img src="http://us.f2.yahoofs.com/users/41732981z94cf47c3/c124/__tn_/1186.jpg?ph.UM1BByCkprWYq"></a> web site herehere : small logo tag on upper right sidebar. . . I'm a newbie so be gentle. . . Thanks!! Hello, I am trying to use the hr tag to create a visual division between news stories on this web page http://www.heshimakenya.org/newsmedia.html When I view this page in Firefox on a Mac, the story headlines are immediately under the hr line. I want to add some bottom padding to this line so there is some white space between the line and the headlines. I have used the hr tag in other sites and have never had this rendering issue before so I'm really stuck. For example, the site below uses the hr tag but when viewed in Firefox on a Mac, the lines render fine. http://oharenoise.org/ I've been working on a css zen garden and I've only got one more roadblock untill it is complete... The site works perfectly in IE 6 but all the other browsers don't like it so much. I suspect the problem lies in the positioning of the preamble and the supporting text, but I've tried nearly everything...I can make the site work in other browsers but then resizing the text causes the page to break. Plz help me make the site look and behave the way it does in IE accross all browsers. Here is the page- http://phobos.ramapo.edu/~chdonnel/zenie/ here is the css- http://phobos.ramapo.edu/~chdonnel/zenie/sample.css also the site closely follows the layout methods of this page http://csszengarden.com/?cssfile=/179/179.css&page=1 Thanks, Chris Hey, for a while I've been developing a site, just to improve my skills in php etc. I always tested it in IE7/IE8 and Mozilla 3, I knew other browsers wouldn't render it great, but I also need things to look okay with Chrome. This is how my site SHOULD look: This is how it looks in chrome: My site URL is http://www.pokerbrothers.net The HTML for the entire page: The parts that effect the 2 bars that are broken in chrome are highlighted Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta name="keywords" content="poker,brothers,free,fast,simple,texas,holdem,guest" />
<meta name="robots" content="follow,index" />
<title>Home :: PokerBrothers.net</title>
<link href="http://www.static.pokerbrothers.net/css/include?load=15&x=182&y=631" rel="stylesheet" type="text/css" />
<script type="text/javascript">
// Globs
var session_id = "pjpennan89o2m1dn6kjh4n48d7";
var session_userid = 0;
var session_username = "Guest_";
var session_location = "http://www.pokerbrothers.net/";
var session_location_encoded = "http%3A%2F%2Fwww.pokerbrothers.net%2F";
var session_location_last = "";
function pageOnLoad () {
setTimeout("pbhttp_Session_Exit(true, '15')", 900000);
}
</script>
<script type="text/javascript" src="http://www.static.pokerbrothers.net/js/class.js" defer="defer"></script>
<script type="text/javascript" src="http://www.static.pokerbrothers.net/js/global.js" defer="defer"></script>
</head>
<body onload="pageOnLoad();">
<div id="container" align="center">
<div class="bar_container">
<ul id="bar_header">
<li id="bar_header_left"></li>
<li id="bar_header_title"><a href="http://www.pokerbrothers.net/"></a></li>
<li id="bar_header_fill"></li>
<li id="bar_header_howtoplay"><div/><a href="http://www.faq.pokerbrothers.net/play/how"></a></li>
<li id="bar_header_signup"><div/><a href="http://www.signup.pokerbrothers.net/"></a></li>
<li id="bar_header_play"><div/><a href="http://www.play.pokerbrothers.net/"></a></li>
</ul>
</div>
<div class="bar_container">
<div id="bar_navigation">
<div id="bav_navigation_top">
<div id="bar_navigation_top_left"></div>
<div id="bar_navigation_top_fill">
<div id="bar_navigation_top_fill_loginarea">
<form id="navlogin" name="navlogin" action="http://www.login.pokerbrothers.net/login" method="post" onsubmit="return pbhttp_nav_login_check()">
<div id="bar_navigation_top_fill_loginarea_usernamearea">
<input type="text" id="navlogin_username" name="navlogin_username" maxlength="30" value="Username" onfocus="nav_login_form_onclick('user');" onblur="nav_login_form_exit('user')" />
</div>
<div id="bar_navigation_top_fill_loginarea_passwordarea">
<input type="text" id="navlogin_password" name="navlogin_password" maxlength="30" value="Password" onfocus="nav_login_form_onclick('pass');" />
</div>
<div id="bar_navigation_top_fill_loginarea_submitarea">
<input type="submit" id="navlogin_submit" name="navlogin_submit" value="" />
</div>
</form>
</div>
<div id="bar_navigation_top_left_text">
Welcome to PokerBrothers. Please login or <a href="http://www.signup.pokerbrothers.net/">Sign up</a>
</div>
</div>
<div id="bar_navigation_top_right"></div>
</div>
<div id="bar_navigation_bottom">
<div id="bar_navigation_bottom_left"></div>
<div id="bar_navigation_bottom_fill">
</div>
<div id="bar_navigation_bottom_right"></div>
</div>
</div>
</div>
<div class="bar_container">
<table id="bar_body" cellpadding="0" cellspacing="0" border="0">
<tr id="bar_body_top">
<td id="bar_body_box1_top_left"></td>
<td id="bar_body_box1_top_fill" align="center"><div id="bar_body_box1_top_text"></div></td>
<td id="bar_body_merge_top"></td>
<td id="bar_body_box2_top_fill" align="center"><div id="bar_body_box2_top_text"></div></td>
<td id="bar_body_box2_top_right"></td>
</tr>
<tr id="bar_body_middle">
<td id="bar_body_box1_middle_left"></td>
<td id="bar_body_box1_body">
Welcome to PokerBrothers.net, bleh.
</td>
<td id="bar_body_merge_middle"></td>
<td id="bar_body_box2_body">
Load ad here
</td>
<td id="bar_body_box2_middle_right"></td>
</tr>
<tr id="bar_body_bottom">
<td id="bar_body_box1_bottom_left"></td>
<td id="bar_body_box1_bottom_fill"></td>
<td id="bar_body_merge_bottom"></td>
<td id="bar_body_box2_bottom_fill"></td>
<td id="bar_body_box2_bottom_right"></td>
</tr>
</table>
</div> </div>
</body>
</html>
And the CSS... Direct links: Some CSS that effects both bars: http://www.static.pokerbrothers.net...de?load=6&x=571 The top bar's css: http://www.static.pokerbrothers.net/css/headerbar.css the other bar's css: http://www.static.pokerbrothers.net/css/navbar.css I'm wondering if anybody has any clues as to why my site appears like this, i've spent hours and hours trying countless things but to no avail. Any help on anything related to this will be appreicated, thanks . Oh, and sorry for the lack of commenting in the CSS, it wasnt planned... It is quite messy A margin-top:10px is the equivalent of margin-top:11px on IE8 (compatibility mode). I actually took a screenshot and counted the number of pixels in Photoshop. This gives me a hell load of frustration because I want to align my comment form's submit button with the bottom of my textarea. For an example look at this (http://www.deliciousdays.com/archives/2009/10/07/stuffed-but-happy/#comments) scroll all the way down. I dunno how deliciousdays did it but they managed to get the button aligned with the textarea in both Firefox and IE. Anybody can help? Has anyone seen hidden inputs being rendered as periods or dots under FF? I am using FF 3.5.4. Is this normal? Thanks Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="content-language" content="en">
<title>Funny Dots</title>
<style type="text/css">
input
{
border:1px solid blue;
display:inline-block;
}
</style>
</head>
<body>
<form action="index.php" method="post" name="mainForm">
<input type="hidden" name="aaa" value="5" />
<input type="hidden" name="bbb" value="" />
<input type="hidden" name="ccc" value="" />
</form>
</body>
</html>
Hey everyone, the development site I'm working on is here.... http://firstchoiceflooring.stealthwd.ca/ The font in the top navigation is Media Gothic.... well, it's SUPPOSED to be. It's rendering really strange. I'm using @font-face. My font looks fine in photo shop, but it doesn't render correctly in FF or website (no IE yet). My CSS is like this.... Code: @font-face {
font-family: mediaGothic;
src: url( "http://firstchoiceflooring.stealthwd.ca/images/fonts/Md_Gothic11.eot" ); /* IE */
src: url( "http://firstchoiceflooring.stealthwd.ca/images/fonts/Md_Gothic11.ttf" ) format("truetype"); /* non-IE */
}
Code: #topNavContainer p{
height:100%;
width:100%;
text-align:center;
font-family: mediaGothic;
}
Any help would be appreciated. This is my first time using @font-face Hi All: When i use <ul><li> and <li> is set to "list-style-type: none;" IE and Firefox renders it differently. Does anybody know a work-around for this? The good example of this and the CSS code is at following holzgreen.com/list-test/ HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>List Test 1</title> <meta name="Description" content="x.x.x. CHANGE .x.x.x"> <meta name="KeyWords" content="x.x.x. CHANGE .x.x.x"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <META name="Publisher" content="Firework Studio"> <META name="revisit-after" content="15 days"> <META name="robots" content="index, follow"> <META name="Robots" content="All"> <link href="000-style.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- .style1 { font-family: "Courier New", Courier, monospace } --> </style> </head> <body> <div #none> <ol> <li>List item - 1</li> <li>List item - 2 <ol> <li>LI - 2.1</li> <li>LI - 2.2</li> </ol> </li> <li>List item - 3</li> <li>List item - 4</li> </ol> </div> </body> </html> CSS: body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em; border: 1px solid #000000; margin: 0em; padding: 0em; } #none ol { background: #BB0000; list-style-position: inside; margin: 0em; padding-left: 1em; /* Moves the Whole List */ } #none ol ol{ background: #BB00BB; list-style-position: inside; margin-left: 0em; padding-left: 3em; /* Moves the Nested List */ } #none ol li { background: #BBBB00; font-size: .8em; margin-left: 0em; list-style-type: none; } #none ol ol li { background: #00BBBB; font-size: 1em; list-style-type: lower-alpha; margin-left: 0em; list-style-type: none; } Thanks for your interest Hi, I have an unordered list displaying contact info for several people. For example: name1 address1 phone1 name2 address2 phone2 name3 address3 phone3 I'd like there to be a blank line between each person's info (just like it is displayed above). To do this, I added line breaks after each list item's closing tag. Here is the code: Code: <ul> <li>name1<br />address1<br />phone1<br /></li><br /> <li>name2<br />address2<br />phone2<br /></li><br /> <li>name3<br />address3<br />phone3<br /></li><br /> </ul> In Safari and Firefox (Mac and Win) there is a blank line between each section of contact info (the desired effect). In IE6, there is no blank line. It looks like this: name1 address1 phone1 name2 address2 phone2 name3 address3 phone3 I'm sure there is a fix out there, I just haven't found it yet. Any help is appreciated. - Tim If you look at my page here in IE and Firefox, you'll see that the footer is stretched in IE. It's barely showing the image, but flooding over into the center of the page. I have no idea why it'd be doing this. View in IE View in FF Here's the CSS used : Code: #footer {
background: #49515C url(img/header_right.gif) no-repeat 100%;
border-bottom: 5px solid #fff;
border-top: 10px solid #fff;
text-align: center;
color: #fff;
font-size: 0.8em;
padding: 10px;
line-height: 16px;
clear: both;
}
Can anyone see a problem? Ok so i initially put my CSS iwthin my HTML document as it was just going to be a test page. I then thought of expanding it into an actual site so wanted to transfer the CSS coding on and external CSS stylesheet. However when doing this the layers pull to the left and out of line .. any problem causing this? Also .. i know i have used position:absolute; tags, and using them is frowned upon when used on all layers. But without these, once again the layers again, are pulled to the left, any help would be fantastic. Regards, Joe. CSS within the XHTML document: Code: <style type="text/css">
<!--
body {
margin: -10px;
/*/*/margin: 0; /* */
padding: 0;
color: black;
background: white;
background-image: url(images/bg%20copy.png);
}
#content {
position:absolute;
width:200px;
height:78px;
z-index:1;
left: 112px;
top: 0px;
}
#nav {
position:absolute;
border:#000000;
border-width:thin;
width:142px;
height:320px;
z-index:2;
left: 123px;
top: 109px;
}
.style {
background:#A01B1E none repeat scroll 0%;
border:1px solid #000000;
}
#aff {
position:absolute;
width:137px;
height:29px;
z-index:3;
left: 123px;
top: 553px;
}
.style1 {font-size: 12px}
#news1 {
position:absolute;
width:200px;
height:43px;
z-index:4;
left: 307px;
top: 108px;
}
#news2 {
position:absolute;
width:200px;
height:115px;
z-index:5;
left: 307px;
top: 278px;
}
#xtreme {
position:absolute;
width:27px;
height:38px;
z-index:6;
left: 860px;
top: 15px;
}
-->
</style>
I have two images, the first (nameplate) i have set to be ontop and centered, whose left side "hits" the side of the window when the window gets small enough like its supposed to. The second is set beneath it (silverplate) and is smaller than nameplate(1500x800). I want this to be centered too so that when the browser is resized it follows the nameplate and doesnt move against it or go out of window. I cant seem to achieve this effect with any combination of positioning and nested divs, the silverplate always goes off the left side of the window and tracks different than the nameplate. Why dont both images behave the same? How would i make them do that? Code: <style>
#nameplate {
top:0px;
height:1500px;
z-index:90;
height:1500px;
overflow:visible;
}
.img {
position:relative;
display:inherit;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body bgcolor="#00FF33" style="margin:0px; padding:0px; max-height:1500px; overflow:visible;">
<div id="nameplate">
<img src="Assets/NamePlate.png" style=" z-index:98; opacity:0.5;" class="img" />
<img src="Assets/SilverPlate.png" style="z-index:95; left:-300px; top: -1000px; width:100px; height:100px;" class="img"/>
</div>
http://www.lovemeforme.org/alecia/ I've made it so it works perfect in FF, IE, Netscape.. but in Opera it's messed up. Is there anyway I can specialize a stylesheet for just Opera? Also, anyone know of any free services that provide screen shots for all common web browsers. I remember I had a link a while ago, but I've since lost it. Thanks for the help in advance. I was playing around with the CSS on my blog to try and get the header alligned correctly. In Firefox I added both a bottom and top margin to the #logo to make it align correctly. the bottom margin figure was -45px;. When checking the site in Chrome there was still a large gap under the logo. So after a little trial and error it seemed that Chrome wanted -125px as the bottom margin figure to achieve my desired results. So I've left it at -125px but then back on Firefox the navmenu is now aligned wrong. Any ideas? **EDIT** I can't link to my site so you can see it as I'm a new user. Hi there, I have some CSS tabs, but they are displaying differently in IE7 than FF. This is my code: PHP Code: #nav { float:left; width:100%; background:yellow; height: 27px; font-size:93%; line-height:normal; list-style: none; margin: 0px; } #nav li { float:left; background:url("images/tab_left.jpg") no-repeat left top; margin:0; padding:0px; list-style: none; } #nav a, #navheader strong, #nav span { display:block; background:url("images/tab_right.jpg") no-repeat right top; padding:5px 15px 4px 6px; } and my html: PHP Code: <div id="nav"> <ul> <li><a href="#">Home</a></li> <li id="current"><a href="#">News</a></li> <li><a href="#">Products</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </div> Any ideas whats causing these different outcomes? Hello all, I'm trying to make a webpage that has about 200px padding on the left and right side and 0 padding at the top and bottom, i would like my content to be viewed in that small area. I'm wanting the background color where my content will be to be grey but i want the padded sides to stay white. Is this possible? Like this http://www.cssbasics.com/, you see how the sides are grey and the content area is in a different color, how can i do this? Thank you! I have a rather perplexing problem. I just created a website locally in CSS and it works fine when I open it locally (i.e., from my harddrive) in either Firefox or IE. But when I upload the HTML, images, and CSS to my webserver, the formatting breaks rather badly. I've checked that the files are exactly the same, so I do really don't know what the problem is. Here is the disfunctional online version: http://www.forma3.com/fs/jmf/index_v0.1.html And what it looks like locally: http://www.forma3.com/fs/jmf/local.png Hi, I am seeing an error which I think is because of z-index, the error is really strange. See these two posts in two different sites (while keeping in mind that the data is same only the sites are having different css) Code: 1st site (buggy one) : http://bloghutsbeta.blogspot.com/2012/03/testing-3.html 2nd site (the okay one) : http://www.bloghuts.com/2011/08/wizard-fashion.html To see the error please go to first site then click on PLAY and while keeping it open, kindly go to the 2nd on and then click on PLAY you will see the error that I am talking about, I am not able to understand what's going on? |
|||||||