|
CSS - Works Fine With Firefow But Not With Ie.. Why?
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>
Similar TutorialsI 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 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 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. (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. 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. 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 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> 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 if 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 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! 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>
finally got everything lining up correctly in IE, but now the background color in not showing up in FF, but it does in IE here is my code and the bit in bold is what has the problem with the background color in FF also, is there a way to make the page end when the content ends? /* CSS Document */ /* basic elements */ body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #545838; background-color: #e9ebdc; background-image: url(images/bg.jpg); margin-top: 0px; } /* specific divs */ #page { background-color: #fdfdfb; width : 750px; padding : 0; margin : 0 auto; text-align : left; height : auto; border-left : 1px solid #000000; border-right : 1px solid #000000; } #headerimg { background-image : url(images/callmefarms.jpg); margin : 0 auto; width : 750px; height : 280px; padding : 0; } #topbar { background-image : url(images/header1.jpg); margin : 0 auto; width : 750px; height : 85px; padding : 0; } #content { float : left; width : 500px; height : auto; } #sidebar { float : left; width : 243px; height : auto; } #currentevents { background: #fdfdfb url(images/currentevents.jpg) no-repeat top left; margin-top: 0px; width: 500px; height: 75px; } #publications { background: #fdfdfb url(images/publications.jpg) no-repeat top left; margin-top: 0px; width: 500px; height: 100px; } #footer { background: #a2a876 url(images/footer.jpg); width : 750px; padding : 0; height: 75px; } #innercontent { float : left; width : 750px; height : auto; padding : 0; } #resources { background: #e9ebdc url(images/resources.jpg) no-repeat top left; width: 243px; height: 60px; text-align: center; } /* specific classes */ .clear { clear:both; font-size:0; line-height:0px; height:0; } I just uploaded this to my server, don't know what happend. It looked fine. The original question I had was how to fix the "right bar" to line up vertically, correctly with the left menu and center text...(something to do with the positioning). Either way, can someone help me out here...as you'll see I am not the best at CSS. Thanks. Code: <div style="position:absolute; left:207px; top:210px; width:427px; height:850px; z-index:3" id="center"> <div class="rightbar" style="position:absolute; left:649px; top:210px; width:140px; height:850px; z-index:4"> See here The center column title. It is aligned properly in Firefox but is shifted in Internet Explorer. Ive been trying to figure out various way to fix the problem but cannot find the solution. Any tips ? 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 site css View the index in IE and FF... It is centered how I want it in IE (directly under the picture), but not in FF. How can I fix this? (I realize it's most likely a bug in IE that allows it to display the way I thought it was supposed to, so what's the right way to get this to work?) Thanks Enjoy your weekends Bryan The code below works perfect in FF2/FF3 and IE6 ... In IE7 the first UL is perfect, but the 2nd UL is vertical (not horizontal) If you have any suggestions on how to improve my CSS that would be appreciated to. Its kind of a mess because I have been pulling my hair out for the last 3 hours trying to get the 2nd UL to render horizontally rather than vertically. Code: <title>Untitled Document</title>
<style type="text/css">
body
{
margin: 0 auto;
padding: 0 auto;
}
#lottoNumbersWrapper
{
float: left;
width: 700px;
height: 118px;
background-image: url(images/structural/lottoNumbersBG2.jpg);
background-repeat: no-repeat;
border: 0px solid black;
}
.lottoNumbers
{
margin: 0;
margin-right: 20px;
margin-top: 10px;
padding: 0;
border: 0px solid black;
}
.lottoNumbers li {
list-style: none;
list-style-type: none;
float: left;
font-size: 13px;
height: 40px;
width: 45px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-position: center;
background-repeat: no-repeat;
border: 0px solid black;
cursor: pointer;
}
.lottoNumbers li.white
{
background-image:url(images/whiteDot.gif);
}
.lottoNumbers li.blue
{
background-image:url(images/BlueDot.gif);
}
.lottoNumbers li span {
display: block;
margin-top: 12px;
text-align: center;
font-size: 16px;
font-weight: bold;
color: #000;
}
</style>
</head>
<body>
<div id="lottoNumbersWrapper">
<div style="float: right; border: 0px solid black">
<ul class="lottoNumbers">
<li class="white"><span>14</span></li>
<li class="blue"><span>4</span></li>
<li class="white"><span>9</span></li>
<li class="white"><span>12</span></li>
<li class="white"><span>14</span></li>
<li class="blue"><span>18</span></li>
<li class="white"><span>20</span></li>
<li class="white"><span>21</span></li>
<li class="blue"><span>26</span></li>
<li class="white"><span>33</span></li>
</ul>
</div>
<br />
<div style="float: right; border: 0px solid black">
<ul class="lottoNumbers">
<li class="white"><span>14</span></li>
<li class="blue"><span>4</span></li>
<li class="white"><span>9</span></li>
<li class="white"><span>12</span></li>
<li class="white"><span>14</span></li>
<li class="blue"><span>18</span></li>
<li class="white"><span>20</span></li>
<li class="white"><span>21</span></li>
<li class="blue"><span>26</span></li>
<li class="white"><span>33</span></li>
</ul>
</div>
</div> <!-- END LOTTO NUMBERS WRAPPER -->
</body>
</html>
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 Hi, I have been battling with this issue for a while now and need the community's help here. I am not the sole developer on this project and it's kind of difficult to work through other people's code - plus, I'm a developer, not a designer. Anyow. Have a look at this page: Article on Jakarta Globe Site I implemented the drop down for the 'share article' feature. I'm using scriptaculous and costum-built JS to achive the effect. It's all good in IE - but you can see that in FF, the bread crumbs jump to the right when the drop down is activated. I have tried to implement a 'clearit' div like this: CF Code: Code: <div class="article-body"> <div id="clearit"></div> CSS: Code:
#clearit {
display: block;
clear:both; }
With the effect, that in FF, the whole article jumps down a few pixels when the drop down is activated. (The bread crumbs don't jump to the right anymore. I'm at loss now. Here's the CSS code for the relavant div's: Code:
#article-heading {
border-top:solid 4px black;
background:url(../images/objects/module-head-bg.gif) repeat-x top; height:26px; }
.article-heading span {
display:block;
float:left;
padding:5px 15px 5px 10px;
height:16px; }
#slidedown_share {
position:relative;
width:123px;
height:137px;
background:#f4f2e6;
border-left: solid #000 1px;
border-right: solid #000 1px;
border-bottom: solid #000 1px;
text-align:left;
left:510px;
}
.article-body {
border-left:solid 1px black;
border-right:solid 1px black;
border-bottom:solid 1px black;
background-color:white;
padding:10px;
margin-bottom:8px;
font-size:11px;
}
Does anybody have an idea why this is happening and how I can avoid it? Thank you for your help Adrian |
|||||||