|
CSS - Ie Overexpanding Div, Firefox Works Great
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 --- */ --------------------------------------------------------- Similar TutorialsHi! I am making an online store for a very important client of mine. I build a shopping sub-list which floats to the left of the main page... and it looks BEAUTIFUL in Safari. But the images are not displaying correctly in Firefox. I was hoping somebody could help me. Also, could somebody tell me how it looks on IE? I have a mac, and my client is probably using IE... so I can't see how it looks Anyway, the site is.... blocked and the CSS #shoppinglist1 li { float:right; list-style: none; display:block; } #shoppinglist1 a{ width:100px; height:20px; text-decoration:none; background-image:url(images/shoppingmenu-bgsmall.gif); background-repeat: repeat; background-position: center center; } #shoppinglist1 a:hover { width:100px; height:20px; text-decoration:none; background-image: url(images/shoppingmenu-hover.gif); background-position: center center; } #shoppinglist1 a:active { width:100px; height:20px; text-decoration:none; background-image: url(images/shoppingmenu-active.gif); background-position: center center; } and the HTML <div id="shoppinglist"> <img src="images/shoppingmenu_top.gif" style="margin: -15px auto;"/> <ul id="shoppinglist1"> <li><a href="#"><img src="images/shoppingmenu_03.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_04.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_05.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_06.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_07.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_08.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_09.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_10.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_11.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_12.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_13.gif" align="center" border="0"/></a></li> <li><a href="#"><img src="images/shoppingmenu_14.gif" align="center" border="0"/></a></li> </ul> <img src="images/shoppingmenu_bottom.gif" /> </div> Thank you so much for your help! 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 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'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.... 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 I am new to style sheets, and I have been trying to get an entry level position with a web developer here close to me. They sent me a PSD and told me to layout using nothing but CSS and no tables. So I did so... and it looks fantastic in Firefox, but not at all good in IE. The only real problem is with the positioning.. the content color and size and everything seems to be fine.... all the positioning is done in the code on the website, where you can view source... I pasted the CSS code below, but doubtful it will help much. Can anyone offer me some help? The site is he http://www.eomnis.com/test the style sheet is here http://www.eomnis.com/test/css.css and i pasted the style sheet code below. Thanks for any help everyone. Aaron <style type="text/css"> body { background-image: url('images/main_background.jpg'); background-color:#000000; background-repeat: no-repeat; margin: 0px; } .top_text { font-size: 14px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFF00; font-weight:400; } .bold_grey{ font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#EEEEEE; font-weight:300; letter-spacing:inherit; } .small_text{ font-size:9px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#EEEEEE; font-weight:300; letter-spacing:inherit; } form { font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; font-size:10px; font-weight:300; } .select { font-size:9px; height:15px; } .input { font-size:9px; height:16px; width:160px; } .zip { width: 94px; height:16px; font-size:9px; } .Footer_links{ color:#CCCCCC; font-size:14px; font-weight:300; text-decoration:none; } </style> I have the following CSS that I believe is valid, but it only works in IE. In fact in IE it works perfect, but in FireFox it does not display anything at all. Code: <div style="font-size:8px; text-align:left; background-color:red; width:100px;"><div style="font-size:8px; background-color:green; width:75px;"></div></div> What I am trying to do is display a rating. In the above example, the rating is 75/100, so a green bar 75px long over a red bar 100px long. hi The following CSS code works in Firefox, but not IE. The site has a fixed top bar using CSS which works perfectly in firefox, but stuffs up in IE. Does anyone know what I need to change it to to fix the problem? Code: html, body
{
margin: 0;
padding: 0;
height:100%;
max-height:100%;
font-size: 90%;
font-family: verdana, sans-serif, arial, helvetica;
background-image: url('images/gradient.jpg');
background-repeat: repeat-x;
background-color:#fff;
}
#header
{ position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
z-index: 1;
height: 50px;
margin-bottom: 2em;
background-image: url('images/gradient2.jpg');
background-repeat: repeat-x;
}
#topmenu
{
position: absolute;
left: 250px;
top: 30px;
width:560px;
}
#stats
{
position: absolute;
right: 15px;
top: 5px;
text-align: center;
}
#gutter
{
float: left;
width: 3%;
height: 1px;
}
#col
{
float: left;
width: 70%;
margin-bottom: 1em;
padding-right: 3%;
margin-top: 5.5em;
}
#rescol
{
float: left;
width: 94%;
margin-bottom: 1em;
padding-right: 3%;
margin-top: 5.5em;
}
#rescol a {
text-decoration:none;
}
#rescol td {
text-align: center;
}
#col1
{
float: left;
width: 45%;
margin-bottom: 1em;
border-right: 1px solid #ccc;
padding-right: 3%;
margin-top: 5.5em;
}
#col2
{
float: left;
width: 15%;
margin-left: 3%;
margin-bottom: 1em;
padding-right: 3%;
margin-top: 5.5em;
}
#col3
{
position: absolute;
right: 30px;
margin-left: 3%;
margin-bottom: 1em;
margin-top: 5.5em;
}
#footer
{
clear: both;
height: 50px;
padding: .5em;
font-size: 11px;
}
#footer ul {
border-top: 1px solid #ccc;
margin: 0;
padding: 1em 0 0 0;
list-style: none;
}
#footer li a, #footer li span {
display: block;
float: left;
padding: 5px 1em;
border-right: 1px solid #ccc;
}
#footer li span.copyright {
border-right: none;
}
a:hover {
color: #003;
}
h1
{
margin: 0;
padding: .5em;
}
h2
{
margin: 0;
}
hr.c {
border: none 0;
border-top: 1px solid #ccc;
width: 100%;
margin-bottom: 10px;
text-align: center;
height: 1px;
}
<!--[if IE 6]>
body
{
overflow: hidden;
}
div.content
{
height: 100%;
overflow: auto;
}
<![endif]-->
Ok so I have a page, and The opacity only works in firefox, not IE. This is the code im using img{border:0; filter:alpha(opacity=80); -moz-opacity: 0.80; opacity: 0.80;} img:hover{filter:alpha(opacity=95); -moz-opacity: 0.95; opacity: 0.95;} any ideas? I'm a pretty new CSS coder, and primarily use Firefox so I designed my website based on that browser, and now when I try opening it in IE it looks completely wrong and different. Does it have to do with my margins? I have no idea--if someone can just point me in the right direction to even figure out where the problem lies (and even better if you know how to fix it!) that would be fabulous. The website is www.yarniapdx.com and it looks exactly how I want it to in Firefox, but in IE it's a mess! Thank you so much in advance, -lindsey http://www.wam.umd.edu/~gdogum/testing/gdogum/gdogum.html http://www.wam.umd.edu/~gdogum/testing/gdogum/gdogum.css those are my two files, it seems to be working okay in IE6/win but not in firefox... anyone can maybe help me out? thanks it is much apprceiated. edit: also both files validate I'm having a display problem with the following code in Firefox. It works fine in IE. Basically I want the layout to look as close as it does in IE from firefox (I think I'm using the W3C CSS correctly?)... Any suggestions? Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<style type="text/css">
<!--
body
{
background-color: #6699CC;
}
#topBanner
{
overflow: hidden;
width:100%;
height:15%;
}
#contentTable
{
height: 84%;
width: 100%;
border:1px solid black;
}
#leftMenu
{
background-color: #6695FF;
width: 15%;
height: 100%;
display: block;
border: 8px outset #999999;
padding: 1px;
vertical-align: top;
}
#contentArea
{
background-color: #FFFFFF;
width: 85%;
height: 100%;
display: block;
vertical-align: top;
border: 2px solid #999999;
}
.menuChildShow
{
display: yes;
}
.menuChildHidden
{
display: none;
}
-->
</style>
<script type="text/javascript">
function toggleMenu1(objName) {
temp = document.getElementById(objName);
if(temp.className == "menuChildShow") {
temp.className = "menuChildHidden";
} else {
temp.className = "menuChildShow";
temp.style.color = "#00ffff";
}
}
</script>
</head>
<body>
<div id="topBanner">
<img src="" width="2048" height="75">
</div>
<table id="contentTable">
<tr>
<td id="leftMenu">
<div id="menuItem1" class="menuParent">
<a onclick="javascript:toggleMenu1('sub1Item1');">Item #1</a>
<div id="sub1Item1" class="menuChildHidden">
Item #1 Child 1<br />
Item #1 Child 2<br />
Item #1 Child 3<br />
Item #1 Child 4<br />
</div>
</div>
<div id="menuItem2" class="menuParent">
<a onclick="javascript:toggleMenu1('sub2Item1');">Item #2</a>
<div id="sub2Item1" class="menuChildHidden">
Item #2 Child 1<br />
Item #2 Child 2<br />
Item #2 Child 3<br />
Item #2 Child 4<br />
</div>
</div>
</td>
<td id="contentArea">
Content area
</td>
</tr>
</table>
</body>
</html>
Hey, Ive used Macromedia Dreamweaver to design the following site. But for some reason the CSS seems to only work in IE. When I view the page in firefox, the CSS doesnt seem to work properly. Ive never encounterd this before, and have run out of ideas. What do you think? Website Here Cheers, Smitch Hello. I am going to change my site to using a CSS file for font color and display and such. I am pretty new at using CSS files with my web site, other that messing with it in modifying my blog skin. I created one I want to use at: http://rhodesfamily.org/style.css, but I can only get it to work with IE. Here is my test page: http://rhodesfamily.org/index_test.htm. It will not display in Firefox, which is my main browser . Your help would be greatly appreciated! Thanks, Carl Ok, so i worked a little on this site and i can't get it to work in IE, and its really starting to bug me. What am i doing wrong? http://markspixel.com/smoothtobacco/bio.htm Code:
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>Smooth Tobacco</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#content {
position:relative;
z-index:1;
}
.style1 {
margin-right: 0px;
}
</style>
<!--[if IE]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]-->
</head>
<body>
<img src="images/background.jpg" alt="background" id="bg" />
<div id="content">
My content is here
</div>
Thanks for reading my question. Why do my a:link, a:visited, a:hover, and a:active commands work for IE but not in FireFox? The hover works in both, but the visited only works in IE. I don't have a url for this page yet, so I've put it under my band web page. www.pierced.ca/Kelly/index.htm Try it with IE and you'll see that the visited works. Try it with FireFox and the visited doesn't work. Thanks again, Brad a site im working on .. (apparently I cant post URLs....) it's the normal stuff at teh beginning with porservices.formapixel and the normal web ending stuff at the end. works fine in Firefox. I validated with transitional. In IE7 the background images for the main divs show up but the entire content and header do not. I thought for some reason it had to do with the z-index. So I removed it from the CSS and changed the .gifs to .pngs that are transparent in the center. It still doesnt work. I'm lost. Quote: #bg { position: absolute; top: 0px; left: 0px; background: #fff url('images/bg.png') no-repeat; width: 747px; height: 264px; } #wrapper { position: relative; width: 747px; margin: 0 auto; background: #fff url('images/abg.png') repeat-y; } that is the css relating to the two images that seem to be blocking everything (that's the only thing I can figure is that those two bg images are just sitting on top of everything.) any suggestions? I can provide the entire css file if necessary just didnt want to post all of that here if i didnt need to. thanks in advance. I am having a problem displaying text under images in IE, it looks fine on FF though. In IE the text runs down the side of the images and looks really bad. Can someone tell me why it does not display properly in IE? Here is an example page product_info.php?products_id=209 And this is the stylesheet stylesheet.css Any help would be much appreciated. Thanks Peter PS. Looks like I am not allowed to post links yet, I can send them to you if you like? the menu at the site I am building myself at: http://sphinxgaming.ath.cx/ Works perfectly in firefox, all links are missing on the menu in IE And the validator gives me some very strange errors (document type does not allow element "BODY", for example) http://validator.w3.org/check?uri=h...lidator%2F1.654 Any ideas? By the way, I have tried 3 different DOCTYPES, with no better results |
|||||||