|
CSS - Gap Problem In Ie, Works Fine In Firefox
Re-coding a site I designed to follow web-standards and having a small problem with a gap in ie.
Page-template Page is working fine in firefox, but in internet explorer the "content" div is getting pushed down from the "framemain" div. I set padding and margin all to 0 and that didn't help. I could get around this if I abs position my nav, but I'd rather do it this way. Any thoughts or help appreciated. Similar Tutorialsif you take a look at http://www.cherrysociety.com/mag/art/ you'll see it works fine in IE, but when it is viewed in firefox it's so messed up. can anyone help me? tell me what i've done wrong? the css is at http://www.cherrysociety.com/mag/style.css thanks guys, i appreciate it a lot. I added a tab content js to my main page. I did not change anything at css file. Area where I added tab content js works fine with Firefox but not with Internet Explorer. What happens with IE is that contents at the center of the page moves under. I am not sure if I clearly described the problem. Please take a look at: http://www.pearl.ru/isdunyasi/ I have a three column layout (25%, 50%, 25%) which works fine in IE7 and firefox but not IE6. In IE6 the right column rolls down (would not fit in the space). What would be the best fix for this issue ? Here is my CSS. #main3Column { float: left; width: 50%; } #leftColumn { /* IE7 1px rounding error */ float:left; width:25%; margin-left:-1px; } #rightColumn { float:left; width:25%; } .columnBoxLeft { padding: 0px 0px 0px 6px; margin: 5px 0px 5px 0px; } .columnBoxMiddle { padding: 0px 5px 0px 5px; margin: 5px 0px 5px 0px; } .columnBoxRight { padding: 0px 5px 0px 0px; margin: 5px 0px 5px 0px; } HTML ==== <div id="leftColumn"> <div class="columnBoxLeft"> <h2 class="channeltitle">Left Column</h2> <p>Your Text Here</p> </div> </div> <div id="main3Column"> <div class="columnBoxMiddle"> <h2 class="channeltitle">Main Column</h2> <p>Your Text Here</p> </div> </div> <div id="rightColumn"> <div class="columnBoxRight"> <h2 class="channeltitle">Right Column</h2> <p>Your Text Here</p> </div> </div> I just finished an element for a redesign of my website. I open it in Firefox, working. I open it in Safari (for Windows), fine. I open it in IE, I almost cry. My entire page is screwed up! I can't tell if it's the floats, the margins, the lists (I think it's the lists). Anyways, does anyone know whats wrong so I could fix it? http://www.politinks.com/topbar Any help would be appreciated. Thanks! I have a blog found here buildingsolutionsmidlandsltd.co.uk/blog/ The left menu is the issue. In firefox its perfect, but in ie7 its not aligned right. Please help, im tearing my hair out. /* Template */ #content{ float:right; width:75%; } #menu{ float:left; width:20%; } /* Footer */ .footer{ background-color:#CCCCCC; height:22px; margin:auto auto 10px; padding-left:10px; padding-top:8px; width:890px; clear:both; } .footerlist { font-size:10px; } Hi! Please help me again! I cannot figure this out. I have tried striping out everything out to see if I could figure out what was causing it -- I can't. This one part is not working - everything else is fine. When I take this out I have no problems. Basically, i'm trying to have an image with text next to it (without it wrapping around the image). In IE it works. In Firefox the text drops below the image. Here is the code stripped out. Unfortunately, I cannot access and FTP to upload this - but I don't think that should matter. Please, What am I doing wrong? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>ARGH</title> </head> <body> <div style="margin-left:10px; margin-top:10px; width: 90%;"> <div style="float: left; padding-right: 10px;"> <img src="images/img.jpg" width="200px" height="100px" border="1"> </div> <div style="float: left;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tellus purus, aliquet ut, posuere vitae, ullamcorper at, sapien. Donec vel sapien a lorem vehicula imperdiet. Aliquam a nunc sed lectus rhoncus imperdiet. Maecenas commodo scelerisque nulla. </div> </div> <div style="margin-left:10px; margin-top:10px; width:90%;"> <div style="float: left; padding-right: 10px;"> <img src="images/img.jpg" width="200px" height="100px" border="1"> </div> <div style="float: left;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tellus purus, aliquet ut, posuere vitae, ullamcorper at, sapien. Donec vel sapien a lorem vehicula imperdiet. Aliquam a nunc sed lectus rhoncus imperdiet. Maecenas commodo scelerisque nulla. </div> </div> <div style="clear: both;"></div> </body> </html> http://www.refinethetaste.com/step3.htm Can someone tell me why this page appears perfectly fine with ie but appears awfully wrong with firefox. I am almost done with the project, please help..... s.o.s Code:
style>
/*review order*/
#checkoutprocess { width:576px; float:left; margin-right:2px; }
#checkoutprocess .checkoutprocess { float: left; width: 574px; margin: 10px 0; border: #ece7d1 1px solid;}
#checkoutprocess h1 { height:30px; font-size: 18px; color:#716759; line-height:30px;}
#checkoutprocess .checkoutprocess .thdesc { float: left; width:264px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; }
#checkoutprocess .checkoutprocess .th { float: left; width:70px; height:14px; font-size: 14px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px;}
#checkoutprocess .checkoutprocess .thh { float: left; width:568px; height:14px; font-size: 14px; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; }
#checkoutprocess .checkoutprocess .tddesc { float: left; width:274px; height:80px; font-size: 14px; color:#716759; margin:3px; padding:3px; vertical-align:text-top; }
#checkoutprocess .checkoutprocess .color { float: left; width:70px; text-align: center; color:#716759; background-color: #f2efe9; margin:3px; padding:3px; vertical-align:text-top; }
#checkoutprocess .checkoutprocess .noncolor { float: left; width:70px; text-align: center; color:#716759; margin:3px; padding:3px; vertical-align:text-top; }
#checkoutprocess .checkoutprocess .intprice { font-weight:bold; }
#checkoutprocess .hline { border-bottom:5px solid #ece7d1; margin:10px 0 10px 0; padding:0; }
#checkoutprocess img#updatesbasket { float:left; width: 141px; height: 15px; border: 0px; }
#checkoutprocess img#remove { float:right; width: 52px; height: 15px; border: 0px; }
#checkoutprocess img#contshopping { float:right; width: 141px; height: 25px; padding-right:50px; border: 0px; }
#checkoutprocess img#checkout { float:right; width: 89px; height: 25px; border: 0px; }
</style>
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>
Firefox works, IE doesn't Help with CSS pls :-) Firefox: http://img144.imageshack.us/img144/...irefoxstone.jpg Internet Explorer: http://img5.imageshack.us/img5/3856/explorerstone.jpg Here is that part of css i believe is affecting it: Code:
div.module h3 {
margin: 0px 0px 15px 10px;
font-size: 1em;
color: #FFEFD5;
text-transform: uppercase;
}
div.module {
margin-bottom: 25px;
padding: 5;
float: left;
clear: both;
width: 100%;
background: url(../images/bottom.jpg) repeat-x bottom left;
}
div.module div {
padding: 0px;
background: url(../images/left.jpg) repeat-y top left;
}
div.module div div {
padding: 0px;
background: url(../images/top.jpg) repeat-x top left;
}
div.module div div div {
padding: 9px 9px 20px 9px;
background: url(../images/right.jpg) repeat-y top right;
}
div.module div div div div {
margin: 1;
padding: 3;
background: url(../images/parchtexture.jpg);
}
================== I have seen this code in some index files Some people put this in there index is this a code does this make your index.php use a different css file depending on the browser you use? Code:
<!--[if lte IE 6]>
<style type="text/css">
.clearfix { height: 1%;}
#ja-cssmenu li { float: left; clear: both; width: 100%; }
</style>
<![endif]-->
<!--[if gte IE 7.0]>
<style type="text/css">
.clearfix { display: inline-block;}
</style>
<![endif]-->
I am trying to center an inline list navigation inside the div. I think I got it. It works in FF, Safari, Opera but there is an extra space in IE therefore it does not center correctly. Here is the URL http://holzgreen.com/gap/gap_sun_catchers.html Here is the CSS .gapLayout #kit_groupPerfect ul { display:inline-block; list-style:none; padding:0px; margin:10px 0 0 0; height: 23px; text-align: center; border: 1px solid #666666; } .gapLayout #kit_groupPerfect ul li { float:left; margin: 0px 7px 0 7px; text-align:center; font: bold 11px arial, verdana, sans-serif; height: 11px; padding: 5px 5px 6px 5px; background-color: #EEE; } As always, any suggestion will be appreciated. sukruB I dont get why but codes below work fine with firefox but in IE image overflows from <li> area. How can I fix it? Code:
<style>
#splitcontentright {
float:right;
margin:2px;
width:346px;
height:225px;
background:#FFFFFF url(images/nheadlines_bg.gif) top no-repeat;
}
#splitcontentright h1 {
padding:0px;
margin:0px;
font-size:14px;
font-weight:bold;
background-color:inherit;
color:#FFFFFF;
}
#splitcontentright .news img {
float:left;
height:60px;
width:60px;
margin:4px 4px 4px 4px;
}
#splitcontentright .news{
border-top:none;
background-color:#e8e8e8;
margin:0;
}
#splitcontentright .news li a{
display:block;
text-decoration:none;
padding:0px;
color:#000000;
border-top:#FFFFFF 1px solid;
}
#splitcontentright .news li a:hover{
background-color:#FFFFFF;
}
</style>
<div id="splitcontentright">
<h1>News Headlines</h1>
<ul class="news">
<li><a href="#"><img src="images/nheadlines_pic.jpg" class="news" />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</a></li>
<li><a href="#">2Lorem ium dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</a></li>
<li><a href="#">L3orem ium dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</a></li>
<li><a href="#">Lor5em ium dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</a></li>
<li><a href="#">Lore6m ium dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</a></li>
<li><a href="#">Lo4rem ium dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</a></li>
<li><a href="#">Lor5em ium dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</a></li>
</ul>
</div>
Hey guys, I'm new to web design, and I've begun putting together a template for the basic aspects of my page. Everything works fine in FireFox but nothing but the background shows up in IE. It's very frustrating because I have a feeling it's something small but I don't know what that thing is. Here is the link to the template I'm working on : thehempdaddy.com/unfinished/newdesign.html Any help pointing me in the right direction will earn you a friend for life. My site has three columns. left-middle-right The middle column in IE is right underneath the header as it should be. On firefox the middle coumn is as far below the header as the height of the right column. I have tried everything but i cant get it to look right in both browsers. It is all done with floated divs and doesn't use any tables at all. Please can someone help me! www.datahq-online.co.uk Thank you! (The relevant subset of my) website is he http://www.smoli.com (URL address blocked: See forum rules) It was designed using FrontPage 2003 (I know, I know - but it was a long time ago and it was the only thing I had access to at the time...). Everything works fine in: - Preview from within FP. - IE8 and IE9 - Latest version of Chrome. But not with Firefox (latest version). Problem is that the table doesn't seem to resize to the screen size, and the scrolling of the logos at the bottom are "all over the place". I am pretty new to CSS, and the code the scrolling logos was inserted as is from (URL address blocked: See forum rules) Any idea what is causing the incompatibility? Many thanks. My web page looks fine on FF and Chrome, but doesn't on IE. Everything is pushed up. Anyone have any suggestions? I have searched the net and can't find a solution. egoboosters . org / newindex1 . htm Hello. I am using a percentage bar javascript code on my website, the problem is, The script works fine in FireFox without adding: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> But only works in IE if I add that code. The problem is, when I do add that code some of my tables go twice the size in height. What is the problem here? Is this going to be easy to fix? What can I do? Thanks a lot, Ben i have a thick left hand border that does not show in firefox, the css is... Code: #container{
margin: 0 auto;
background-color:#ffffff;
width:465px;
border-left:335px solid #8FADB4;
border-right:1px solid #8FADB4;
border-top:1px solid #8FADB4;
border-bottom:1px solid #8FADB4;
background: url('images/br_logo.jpg') no-repeat bottom right;
}
does anybody know why the left border does not show? thanks First off, i'd like to say: So here's the code i'm screwin' with: ul.navlinks { font-weight: bold; background-color: #d7d7d7; margin: -5px -10px 0px -10px; padding: 0px 10px 1px 10px; border-bottom: 1px solid #2169AD; } Looks great in firefox (color fills the whole div) but in IE (i'm using 6.0), there's about 20 pixes to the right that arn't colored. Any suggestions? Thanks Never mind. Thx. |
|||||||