|
CSS - Formatting Looks Great In Firefox, But Ie Is Driving Me Crazy!
Hi folks. I'm new to this forum, but I'm not new to CSS. I've inherited a little problem that was left behind by my client's original developer. Here is the code the makes up the header on my page:
Code: <body> <div id="issingle"> <div id="container"> <div id="sitename"> <a href="http://www.nectardesign.com"><img src="http://www.nectardesign.com/blog/wp-content/themes/default/nectar-product-development.gif" border="0" alt="Nectar Product Development"/></a> </div> <div id="mainmenu"> <ul> <!--<li class=""><a href="http://www.nectardesign.com/blog">Home</a></li>--> <li class="page_item"><a href="http://www.nectardesign.com/about/">about</a></li> <li class="page_item"><a href="http://www.nectardesign.com/service/">service</a></li> <li class="page_item"><a href="http://www.nectardesign.com/category/all-products">portfolio</a></li> <li class="page_item current_page_item"><a href="http://www.nectardesign.com/blog/">blog</a></li> <li class="page_item"><a href="http://www.nectardesign.com/blog/category/news/">news</a></li> <li class="page_item"><a href="http://www.nectardesign.com/career/">career</a></li> <li class="page_item no_bar"><a href="http://www.nectardesign.com/contact/">contact</a></li> </ul> </div> And here is the css pertaining to that code: Code: body {
background:#fff;
color:#303030;
font: normal 12px /*Verdana,Tahoma,*/Arial, sans-serif;
margin:0 auto;
padding:0;
text-align:center;
width:850px;
}
#container {
position: relative;
background:url('http://www.nectardesign.com/images/headerbg.jpg') top center repeat-x;
color:#303030;
border:1px solid #C8C8C8;
margin:10px;
/* padding:10px;*/
text-align:left;
height:598px;
}
html>body #container {height: 1%; min-height: 598px;}
#mainmenu {
position: absolute;
right: 10px;
top: 27px;
margin-right: 5px;
}
#mainmenu li.page_item {
float:left;
/* height:35px;*/
list-style:none;
margin:0;
padding:0;
}
#mainmenu a {
border-right:1px solid #b0b0b0;
color:#808080;
display:block;
margin: 0;
padding: 1px 8px;
text-transform:lowercase;
}
Basically, this page's header looks correct in Firefox and Safari, but terrible in IE 5.x (Mac). Not only do the horizontal links (About, Service, Portfolio...) not show up correctly--they're actually on the left sidebar--but the repeating image doesn't repeat like it should. It doesn't even show up at all. Since I'm new, please don't hesitate to let me know if I'm forgetting to include any other important info. Thank you!! J Similar TutorialsHi - I have a small problem with a contact form on my website not working properly and it is driving me crazy, now let me explain. The website works fine in Firefox and Safari, and almost all the pages work fine in IE. The only thing that isn't working is the contact page in IE. The contact page works fine in Firefox and Safari. It's quite tricky to explain to you what I mean really, without showing you. The website is set to a certain width and I have all the margins and paddings correct, as far as I can tell anyway. The contact form is in PHP. The website should be in the middle of the browser at about 900px wide, but when you go to the contact page the PHP code is for some reason making it align to the left, and making the horizontal menu become vertical and out of place. If anyone on here knows about CSS and could take a look for me to see what's gone wrong, I don't think it would take to long, it's just something that I am not aware of or have overlooked in the code. It would be greatly appreciated if you could let me know if you would like to help me out. I'm new to this forum and I did come here looking for help but plan on sticking around so I look forward to meeting you all. Huge thanks if anyone wants to help me, will probably only take a few minutes, I would post the link here but I don't wanna get banned as I am a new member. I'm TRYING to design a site with CSS, but every browser seems to display CSS differently. How do I do it? How can I make a CSS site that'll render properly in IE6 & 7 and FF, and at 800x600 and 1024x768? This is driving me absolutely bonkers. Look at my site: http://www.firstinsurancefunding.net/ It displays differently in EVERY different browser. WHAT'S THE FIX?? (sorry, I'm frustrated. Could really use some pointers). Hi, I've got a strange problem, which I'm sure the answer to it is simple, but it escapes me at the moment. I have a site we're building at: 209.200.245.223/$sitepreview/quality-edge.com/content.aspx?usertype=2&page=home And as you can see, the background image is cut off (the colour on the left-hand side should be seen to fade out. I had to use min-height to get it to show, but I don't think that I completely understand min-height. Mainly my problem is the footer and the background. I think I've read every footer how-to there is and I can't seem to get anything to work properly. I'm not new to CSS so this is really frustrating me. Any help would be greatly appreciated. Thanks, Steph Hi there.. please have a look here, someone knows how to get rid of the 20px gap between the two black boxes? Hey, so I am a beginner in css and I can't seem to figure out this problem. I am trying to get a td to float: left, and it works just fine on firefox, but IE7 is not showing the float. Here is the code I have for it /* Style for Entries in Category View (Cards View) */ /* -------------------------------------------------------- */ table.sobi2Listing { } table.sobi2Listing td { vertical-align: top; float: left; height: 1%; width: 97%; } /* new */ div.vcard_item { margin: 1px 0px 2px 0; padding: 6px; width: 97%; border:1px solid #dddddd; background-color:#fbfaf2; -moz-border-radius: 5px; The actual page is findawebsitedesigner.info/directory-2.html If you look at the entries, they are all floated perfectly in firefox, but not in IE7. If anybody has the fix to this I would love your help. Hi guys Can anyone see why the following has a space under the nav in IE but not in Opera or FF? http://www.mitya.co.uk/cssproblem (CSS: http://www.mitya.co.uk/cssproblem/css/main.css ) I have been playing with it for ages and can't crack it. I've tried removing the clear, etc etc. I'm relatively new to CSS-based design (as opposed to tables) but feel the code and my CSS are OK. Thanks in advance Hi All - I've edited the post to try and define my problem a little better. I've also updated the code so it validates. I'm trying to convert a horrendous table layout into CSS. What I need to have is the logo on the left, and the text on the right. The text needs to move with the browser resize - but it needs to stop moving when it gets to be 425px from the left margin. Currently, it keeps moving with the browser but it doesn't stop at the 425px mark. It drops to the bottom, and eventually if you make the window REALLY small, it drops below the logo. I'm sure that I have just got the code all wrong. I guess what I need to know is how do I put a fixed element next to a fluid element and eliminate the drop from happening. What am I missing. This is my current code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Argh</title>
<style type="text/css">
body {margin: 0px; padding: 0; background-color:#ffffff;}
#header {height: 80px; width: 100%; background-image: url(icon_bg_grad.gif); background-repeat: no-repeat; background-attachment:fixed;}
#nav {clear: both; height: 25px; background-image: url(icon_grad2.gif); background-repeat: repeat-x; }
</style>
</head>
<body>
<div id="header">
<div style="width: 425px; float: left;">
<img src="logo.jpg" width="220" height="66" alt="logo">
</div>
<div style="float: right;">
<p>This is annoying</p>
</div>
</div>
<div id="nav">
</div>
</body>
</html>
Have a look at this page http://aenui.com/test/hg.html It is exactly the same as the wrapper-free holy grail layout as demonstrated on AListApart (http://www.alistapart.com/d/holygrail/example_4.html), except that I added 2 more divs in the center column. I floated the 2 divs to the left and I expect the 2 divs to start stacking side by side but no, it doesn't do that. Apparently this only happens in the holy grail layout. Does someone have a fix? I'd hate to abandon the otherwise elegant holy grail layout just because of this. Haven't checked on IE for Windows, but here are my issues on the mac: my list items Elixir Volume 1, 2, etc are not left-aligned in IE and I cannot figure out why! my arrow list image is not showing up in IE the signup form fields are not formatted properly in IE. they look fine in Firefox though. the url: http://www . nectardesign . com the source code: Code: <td valign="top" align="left" width="230">
<span class="hometext"><b>RECENT ELIXIR NEWSLETTERS</b></span><br /><br />
<span class="hometext"><ul><li><a href="/blog/2008/04/04/elixir" rel="bookmark" title="Elixir (Volume 1, Issue 3)">Elixir (Volume 1, Issue 3)</a><br />Going with the Lateral Flow...</li><li><a href="/blog/2008/03/19/ekuxur-volume1-issue-2" rel="bookmark" title="Elixir (volume1, Issue 2)">Elixir (volume1, Issue 2)</a><br />Chilling for Recovery...</li><li><a href="/blog/2008/03/05/39" rel="bookmark" title="Elixir (volume1, Issue 1)">Elixir (volume1, Issue 1)</a><br />Making Children Healthier with Design...</li></ul></span>
<span class="hometext">Receive our monthly design-industry newsletter <a href="http://www.nectardesign.com/blog/index.php?s=elixir">Elixir</a> via email:</span><br />
<div class="ddfmwrap"><form class="ddfm" method="post" action="http://www.nectardesign.com/" enctype="multipart/form-data">
<p class="fieldwrap"><label for="fm_name">Name</label><input class="fmtext" type="text" name="fm_name" id="fm_name" value="" /></p>
<p class="fieldwrap"><label for="fm_email">Email</label><input class="fmtext" type="text" name="fm_email" id="fm_email" value="" /></p>
<p><input type="hidden" name="MAX_FILE_SIZE" value="1000000" /></p>
<div class="submit"><input type="submit" name="form_submitted" value="Join List" /></div>
</form></div>
and the css: Code: .hometext {
font-size: 12px;
/*width: 230px;*/
letter-spacing:.02em;
padding: 0 10px 0 0px;
background: #fff;
color: #7F7F7F;
text-align: left;
}
.hometext a {
color: #FE6E18;
}
.hometext a:hover {
color: #7F7F7F;
}
.hometext ul {
list-style-image: url(http://www.nectardesign.com/images/arrow.gif);
margin-left:3px;
margin-top:0px;
padding:0 0 0 15px;
clear:both;
text-align: left;
}
.hometext li {
padding:0 0 5px 0;
clear:both;
text-align: left;
width: 230;
]
I'm pretty green with CSS (okay, ALL of html ) I used a template from Mollio.org, then modified it, problem is things just dont look right in IE. url: http://www.m87-blackhole.org/foo/ css file: http://www.m87-blackhole.org/foo/css/wushuwest.css js http://www.m87-blackhole.org/foo/js/common.js The biggest problem is the handling of png+transperancy, I added a fix for it in common.js but it doesnt seem to work very well. Also, the head image, in firefox it has a width of 800, which is what I want, but in IE it spans the entire page, how can I fix that? Any ideas, pointers or resources? Thanks, Mike I'm beating my head against the wall on this one and could use some expert help. In full disclosure, I am using a css template site I found on a open source template site. The site renders fine in Firefox and Opera, but is problematic with some pages. Here is one of the pages I am having trouble with in IE: http://worldwidemediaproject.com/tvrating.php You'll notice that in IE it appears like there are a bunch of <br>'s after the TV Stations header. This does not appear in either Firefox or Opera. The strange thing is this one appears fine in IE: http://worldwidemediaproject.com/tvrating.php?id=71&language=all&genre=all but this one doesn't: http://worldwidemediaproject.com/tvrating.php?id=216&language=all&genre=all The only real difference is that the table size is larger in the pages that have display problems. Is there some kind of IE hack that I need to apply? Many thanks.... Check out this site (WIP)... the issue specifically is with the Screenshots table... Firefox displays exactly like I would expect it to, screenshots contained within a div, with overflow: auto... looks great in firefox, nicely aligned, no vert. scrollbar... perfect. Now look at it in IE... looks like it is automatically expanding to include ALL 10 screenshots, which stretches the whole page... I've done a little research on this, but I can't find a way to get IE to behave... tried word-wrap: break word (as suggested on another site), but this fails as I'm using images. What makes IE decide to expand the <div> tag automatically. Here's the code pertaining just to the screenshots section. Any help or advice you might give me would be appreciated, I've spent a long time developing the site in css and have only opted to use tables for this particular page... thanks! the CSS: --------------------------------------------------------- .screenshots_table { width: 100%; border: 1px solid #000; backgroung-color: #061840; line-height: 15px; } #screenshots_table_overflow { overflow: auto; padding: 0px; display: block; } --------------------------------------------------------- the html: --------------------------------------------------------- /* --- START SCREENSHOTS CONTAINER --- */ // establish the number of screens in the directory $dir_path = "Game Archive/" . $platform_name . "/". $title . "/Screen Captures/"; $screen_count = count (glob ($dir_path . "screen*.jpg")); echo"<td colspan='5'>"; echo"<table border='0' cellpadding='0' cellspacing='0'>"; echo"<tr>"; /* start screenshots details tab */ echo"<td>"; echo"<table border='0' cellpadding='0' cellspacing='0'>"; echo"<tr>"; echo"<td><img border='0' width='38px' class='display_block'"; echo"src='images/tab_left.jpg'></td>"; echo"<td width='100%' background='images/tab_bg.jpg'></td>"; echo"<td><img border='0' class='display_block' width='70px'"; echo"src='images/tab_screenshots.jpg'></td>"; echo"</tr>"; echo"</table>"; echo"</td>"; /* end screenshots tab */ echo"</tr><tr>"; /* start screenshots */ echo"<td>"; echo"<div id='screenshots_table_overflow'>"; echo"<table width='100%' border='0' class='screenshots_table'"; echo" cellpadding='0' cellspacing='0'>"; echo"<tr>"; // iterate through loop and display linked screenshots as req'd for ($i = 1; $i < $screen_count + 1; $i++) { echo"<td cellspacing='1' valign='top' bgcolor='#04112d'>"; echo "<a href='Game Archive/" . $platform_name . "/" . $title . "/Screen Captures/screen" . $i . ".jpg' rel='lightbox' class='horizontal'><img border='0' class='border' src='Game Archive/" . $platform_name . "/" . $title . "/Screen Captures/small" . $i . ".jpg' /></a>"; echo"</td>"; } echo"</tr>"; echo"</table>"; echo"</div>"; echo"</td>"; /* end screenshots */ echo"</tr></table>"; echo"</td>"; /* --- END SCREENSHOTS CONTAINER --- */ --------------------------------------------------------- Essentially it lines up correctly but when I view it in firefox it doesn't. How should I tweak my code to make this work? Here is the url: http://www.westcadet.com/designs/index.htm Here is the CSS code snippet that is making this all work Code: /*--------------- Navigation Layout Begin ---------------*/
#HeaderTopLeftInnerRight {
width:618px;
height:100px;
vertical-align:top;
}
#NavMenu {
width:600px;
padding-top:22px;
}
#NavMenu ul {
list-style: none;
margin-left:22px;
}
#NavMenu li {
float: left;
padding-left:8px;
padding-right:8px;
}
#NavMenu li a {
color:#FFFFFF;
text-decoration: none;
}
#NavMenu li a:hover {
color:#EB2A2D;
}
.NavChosen {
background-color: #858181;
color:#FFFFFF;
}
I am using the following stylesheet code to format an input box and it works fine in internet explorer but doesn't in firefox, how do I fix it so it works in firefox? Tim PHP Code: input.pin {font-size: 7pt; font-family: tahoma; background-color: white; border-top: dotted lightgrey 1; border-bottom: dotted lightgrey 1; border-left: dotted lightgrey 1; border-right: dotted lightgrey 1} Hi, Here's my demo site: http://www.alpha-dreams.com/demo5/ Why is IE 7 off? I've looked everywhere. Do I need a stylesheet for IE 7? Thanks Alrighty, my friend made this menu: phreakyourgeek.com/tf2/original which looks great in Firefox/Opera. However, Internet Explorer absolutely rapes it and it comes out all whacked up. He gave me the task of redesigning it for IE. I am not a CSS whiz, but I made it this far: phreakyourgeek.com/tf2 which needs some help. -Background does not move when hovered over. -The menu is aligned along the left side, they need to align along the right CSS for my menu is embedded in the source, CSS for original is in phreakyourgeek.com/tf2/original/stylesheet.css Please help me make any adjustments to either of them; there must be a way to make the first IE compatible. Thank you for your time. EDIT: I was informed upon posting that links were not allowed for new posts; I have removed the "www." preventing such restriction. I disagree with your rule; my links are legit and without them my visit would be useless. EDIT: solved, can be closed I figured it out, I think. Please look at the menu on this page, http://www.dougswansonre.com/ In IE7 it looks perfect, in FF it looks terrible??? |
|||||||