|
CSS - Grrr I Hate Ie!!
Man i am working an an all new CSS theme and it was all going well intel i seen a bug.
It only pops up in ie, the menu gets cut off 10%! If i resize the code it appears larger in firefox,opera,+ but looks ok in ie... I don't want to resize it just for IE witch only 2% of my old members used. Is there way to fix it without a major headach? Page code. Code: <div id="main_menu">
<ul id="main_menu">
<li><a href="home.php">Home Page</a></li>
<li><a href="javascript:void(0)" class="down" onclick="expand_nav(this); return false;">Members</a><ul style="display: none;">
<li><a href="./login.php">Community Login</a></li>
<li><a href="./lostpass.php">Retrive Account</a></li>
<li><a href="./signup.php?task=350_!sx0993tru35500x0p40e_002354mpL334!500X6PK000D30001">Signup Free!</a></li>
</ul></li>
<li><a href="javascript:void(0)" class="down" onclick="expand_nav(this); return false;">Features</a><ul style="display: none;">
<li><a href="#">Live Chat</a></li>
<li><a href="#">Live Demo</a></li>
<li><a href="#">Feature List</a></li>
</ul></li>
<li><a href="./forum/">Forums</a></li>
<li><a href="./blogs/">Blog</a></li>
<li><a href="javascript:void(0)" class="down" onclick="expand_nav(this); return false;">Support</a><ul style="display: none;">
<li><a href="./help.php">FAQs</a></li>
<li><a href="#">Mail Us</a></li>
<li><a href="#">Phone Us</a></li>
<li><a href="./contact.php">Contact Support</a></li>
<li><a href="./tos.php">Terms Of Service</a></li>
</ul></li>
</ul></div>
Css: Code: ul#main_menu {
color: #231f20;
padding:0;
margin:0 0 0 0;
background-color:#666666;
border-left:1px solid #6b6659;
border-right:1px solid #6b6659;
border-bottom:1px solid #6b6659;
border-top:1px solid #7d786c;
}
ul#main_menu li {
list-style: none;
margin: 0;
padding: 0;
font-size:12px;
}
ul#main_menu li a {
color: #ffffff;
text-decoration:none;
padding:7px;
padding-left:14px;
padding-right:6px;
width:128px;
display:block;
border-top:1px solid #a29e91;
border-bottom:1px solid #8a8477;
}
ul#main_menu li a:hover {
background-color:#DDFADA;
border-top: 1px solid #a29e91;
border-bottom: 1px solid #7d786c;
color: #666666;
}
ul#main_menu .selected {
background-color: #CCCCCC;
border-bottom: 1px solid #5a5548;
color: #fea849;
font-weight:bold;
}
ul#main_menu .down {
background-image:url(images/icons/plus16_disabled.gif);
background-repeat:no-repeat;
background-position:130px;
}
ul#main_menu .down:hover {
background-image:url(images/icons/plus16_disabled.gif);
background-repeat:no-repeat;
background-position:130px;
}
ul#main_menu .down_open {
background-image:url(images/icons/minus16_disabled.gif);
background-repeat:no-repeat;
background-position:130px;
background-color:#DDFADA;
border-top: 1px solid #a29e91;
border-bottom: 1px solid #7d786c;
color: #666666;
font-weight:bold;
}
ul#main_menu .down_selected {
background-image:url(images/icons/back16.gif);
background-repeat:no-repeat;
background-position:130px;
background-color: #CCCCCC;
border-bottom: 1px solid #5a5548;
color: #fea849;
font-weight:bold;
}
ul#main_menu ul {
color: #231f20;
margin: 0; padding: 0;
border-bottom:1px solid #8a8477;
}
ul#main_menu ul li {
list-style: none;
margin: 0;
padding: 0;
}
ul#main_menu ul li a {
color: #666666;
text-decoration:none;
padding:6px;
padding-left:14px;
padding-right:4px;
width:130px;
display:block;
border:0;
background-color: #CCCCCC;
border-top:1px solid #e4decf;
font-size:11px;
}
ul#main_menu ul li a:hover {
color: #111111;
background-color:#DDFADA;
border:0;
border-top:1px solid #e4decf;
font-weight:normal;
}
ul#main_menu ul li .submenu-down {
color: #ffffff;
background-color: #7e755c;
}
Similar TutorialsSeems that if class's are applied to individual TD tags, no matter how i try to implement row highlighing, the TD class will overide the highlighting color. A simple way to implement row highlighting is: <TR onmouseover="this.style.backgroundColor='navy';" onmouseout="this.style.backgroundColor='grey';"> however, a TD with a class that set's a DIFFERENT backgroundColor will disregard the TR mouseover. Any help? 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 there all, Have been having a little look around and this look slike a great place o get some answers to a few design problems I have at the moment. I am in the process of updating a site and completely revamping it, from the original that I designed at lhdesignz.co.uk I have placed the beggining of my new design (only just started) on another site for testing purposes this is: webwizedezignz.co.uk My problem is this, Firefox, IE7 etc look fine but as soon as you load up in IE6 the design goes all to hell! I have had a read of some of the other posts here and they do give me some ideas but I thought it would be best just to let people see exactly what I am talking about. Hope you are able to help webwize Quote: Alright for some reason this wont work in IE. http://65.26.50.204/ec/index.php?page=1 First off the paragraph isnt moving over 8px like its supposed to, making it appear on the edge of the background in the transitional background. Second off the div's are displaying on 2 diffrent lines... they are supposed to function like table cells. The first problem appears in firefox every 1 out of 10 pageloads, for some reason. Which is bs, how is it rendering it diffrent when its the same exact data? Thats not even possible, the computer cant make its own descisions and its following the same rendering process!!! What the hell is it doing? This is really starting to piss me the hell off. I would really appreciate some help. Well I figured it out, after removing some things, which is gonna require a lot of changing in my sites structure, but oh well. I will move onto 3 other issues. 1. The bottom bar he http://65.26.50.204/ec/index.php?page=1 appears on 2 lines instead of 1, in IE only, but in FF it looks fine. 2. I would like the layouts body background to be "100%", how do I achieve that? 3. I have heard my doctype should not be HTML 4.01 Transitional (because of transitional), and I have absoulutely no idea about what doctypes to use, and where the file is located, so what should I use? (I have never used doctypes in any of my past codings, this is a first) I'm trying to build a site: http://smith.incyberspace.net/temp/ I left the CSS in the HTML course so you can read it easily. here is those container CSS if you don't wanna view source (i wanna make it easy on you Code:
#container { width: 900px; margin: 0 auto; }
#content { background-color:#333333; background-image:url(content.jpg); width: 640px; opacity:.40; float: left; margin-left: 120px; border-left:groove 5px #003366; border-right:groove 5px #003366; }
#showcase { width: 185px; margin-top: 23px; position:fixed; z-index:99;}
The idea for design is simple enough but I can't get the one DIV (layer) in the same place on IE as I have in Firefox The background stays where its suppose to The middle layer scrolls like it should The top image that is suppose to stay stationary does... but only lines up where i want it to in Firefox (in IE its WAY off to the right)... I dont know if this can be handled with IE only code, but I am hoping it doesnt come to browser specific hacks.. Im actually hoping i just messed something silly up Any and all help is appreciated... I been banging my head off the wall for hours. p.s. i know there is an opacity issue in IE too, but thats not nearly as impt as this one Thank you! Hey guys i've got a problem that I just can't figure out a solution for, i've attached a screenshot of the design. Basically there are various textboxes arranged in two columns, but their backgrounds (glows/curves behind the boxes) are causing me problems. The width of the design with the curves is larger than my target resolution (1024x768). I've tried playing around with margins but it makes the design generally very inflexible (all boxes have to be non-expandable that way). Is there anyway anyone can think doing this without a) having the minimum with of the website at 1200px b) positioning the boxes absolutely Cheers I am trying to do a layout thats dynamic for different screen sizes in height. So I have a header at 120px high, footer at 40px high and I want the middle part 100% high. Can anyone help please?? I used a css generator now trying to get the 100% height going and its not working . Thanks http://stealaz.myvnc.com/438335.htm http://stealaz.myvnc.com/438335.css Hey All!!! K to everyone that has looked at my other thread, this is a totally different site with a totally different problem. Stupid problem though. tri-m.com/test/eng/ The site looks perfect in FF and IE7 but in IE6 you will see the problem. The divs with height:1px are displaying as divs with a height of 18px in IE6. URGG IE6 should be banned!!!! - Jacenta |
|||||||