|
CSS - Image Renders In Ff But Not Ie? Why?
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!! Similar Tutorialshas 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? 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! 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 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/ 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 I 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. 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>
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 Trying to delete my post but no option to delete so just removing content. Can someone please help me? I am trying to get my left side column to meet my footer image... just like on this website: newcastlegateshead.com See how they side bar goes all the way down and meets the footer? Mine has a one inch gap between the bottom of the column and the footer. Does anyone know what they did to make it meet perfectly?Or the proper css code & where to put it? I've been trying to get this solved for dayyyssss Thank you so much... Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!) Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text. What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at: www.markmcm.co.uk/test/test.html The CSS is as as follows: Code:
/*
* Page Stylesheet
*/
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #eaeaea;
border:0; margin:0; padding:0;
height: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#container {
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 936px;
}
* html #container {
height: 100%;
}
#content {
float:left;
position: relative;
height: 528px;
width: 936px;
z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
position: absolute;
float: left;
display: block;
width: 312px;
height: 176px;
}
.miniscreen1 {
top: 0;
left: 0;
}
.miniscreen2 {
top:0;
left: 312px;
}
.miniscreen3 {
top: 0;
left: 624px;
}
.miniscreen4 {
left: 0;
top:176px;
}
.miniscreen5 {
left: 312px;
top:176px;
}
.miniscreen6 {
left: 624px;
top:176px;
}
.miniscreen7 {
left: 0;
top:352px;
}
.miniscreen8 {
left: 312px;
top:352px;
}
.miniscreen9 {
left: 624px;
top:352px;
}
.info {
height: 30px;
top:3px;
left: 40px;
width: 265px;
float: left;
position: absolute;
}
.infobar {
left:0px;
position: absolute;
top: 140px;
width: 312px;
height: 36px;
outline: none;
color:#000;
background: url("data/infobar.png") no-repeat 0 0;
z-index: 650;
}
.infobar:hover {
background-position: 0 -36px;
outline: none;
color:#fff;
}
#infobar span {
display: none;
outline: none;
}
.clip_title {
outline: none;
font-size: 85%;
font-weight: 700;
vertical-align: top;
text-align: left;
}
.clip_sub {
outline: none;
height: 13px;
font-size: 80%;
line-height: 13px;
font-weight: 700;
vertical-align: top;
text-align: left;
}
And the HTML is: 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"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta name="generator" content=" " /> <link rel="stylesheet" type="text/css" href="page.css" media="screen" /> </head> <body> <div id="container"> <div id="content"> <span class="miniscreen1"> <a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen2"> <a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen3"> <a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen4"> <a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen5"> <a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen6"> <a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen7"> <a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen8"> <a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen9"> <a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> </div> </div> </body> </html> There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!) Hi, I have a question about setting up the Body background-image via a linked external stylesheet. I have a index.html file and a myStyle.css file. I want to setup the background to load an image file, test.JPG. When I embed the following in my index.html, I see the background show up: ** inside index.html file ** <BODY STYLE="background-image: url(test.JPG);"> blah </BODY> BUT, when I define my background in the externally linked myStyle.css file, the background does not load: ** inside myStyle.css file ** BODY { background-image: url(test.JPG); } ** inside index.html file ** <LINK REL="stylesheet" TYPE="text/css" HREF="myStyle.css"> <BODY> blah </BODY> </LINK> Please help. thanks! On button on my website store on CSS but when user turn off "load image automatically" then images don't display. Please show me how to fix it. Thanks a lot. I cant seem to get this to position correctly in firefox. Looks great in IE though... Perhaps I should just use divs with margins rather than ul's I am using a single gif file as an image sprite and want to link the file name in another style sheet so i can reuse this sheet without having to have many copys of the style sheet with a different file names example: Currently like this Code: #store{left:-200px;width:158px;}
#store{background:url('mred.gif') -150px -161px;}
#store a:hover{background: url('mred.gif') -150px 0;}
#fourms{left:0px;width:158px;}
#fourms{background:url('mred.gif') -304px -161px;}
#fourms a:hover{background: url('mred.gif') -304px 0;}
want like this
#home{left:-200px ;width:150px;}
#home{background:inherit;background-position: 0 -161px;}
#home a:hover{background-position: 0 0;}
with the background:url('mred.gif') specified in another style sheet once insted of repeating over the entire sheet. effectively so i can just change the other external style sheet to change the gif file and keep this one the same. HOW? possible? Here's the deal. I want to have one generic button image that I can use for all buttons. Therefore, I don't want to have words on the image but instead want to write them in afterward. Normally, you could just do something like Code: <input type="image" src="..." and things are fine. However, like I said, I don't want to do that because this forces me to create an image with the words already on them. I want a black button that I can write the words on, but want it to still behave like a submit button. Which means, once I type in my username and password, I just want to be able to hit enter (and not be forced to click on the button) and submit the form. Am I asking for too much? Hi I am redesigning my blog and took it down completely. I want to place the day's text post on the day's photo post on top of the latter, while graying out the photo. Is that possible without using flash? Figured this was simple, but I can't seem to figure it out. Using CSS, I want to put an image on the left with text to the right aligned to the bottom. I could easily do this with a table, but I'd like to find a CSS way. With CSS like: .imginfo {float:none;clear:both;margin-top:1em;} .imginfo img {float:left;margin-right:1em;} and code like: Code: <div class="imginfo"> <img src="..." /> Line of Text<br /> Line of Text<br /> Line of Text<br /> </div> I get the image on the left and the text on the right, but, the text starts at the top of the image. I want it to end up aligned to the bottom of the image. Attempting to use vertical-align: bottom doesn't do anything with the text. The effect I am looking for is like below. If you assume the XXX are the image... Code: XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text |
|||||||