|
CSS - Help! Css Menu Small Problem With Centering Issue On Internet Explorer Only
Hey Everyone,
I would greatly appreciate any help. I created a drop down menu and it works perfectly on all browsers except for Internet Explorer. The ONLY issue is that it centers the text on the drop down. It should be LEFT aligned. If you see the menu on any other browser EXCEPT for Internet Explorer, you can see how its supposed to look. The drop down menu items should just be left aligned. See: ratemodifiers.com/menu.htm Thanks for all help!! Id appreciate all help! thank you so much Similar Tutorialshttp://www.djoj.net/home.html <- Faulty Page http://www.djoj.net/style.css <- CSS Hey, for some reason in Internet Explorer my Div will not center and I do not know why. I will try and prvide more detaily when I get home from school. Thank you, ~Brendan I am having problems getting my menu to align, I found the menu system at. http://www.gazingus.org/html/Using_...HTML_Menus.html However when you try and center it using tables or divs you get the result you can see in the attached image. Strange thing it works fine in firefox, and sort of okay in opera, though its not centered and the menu is a little bugged. I just can't think what causing the problem and its annoying me. I've attached all the files in zip file for people to explore and see were i am going wrong. thanks Kinda odd situation. The first 3-column division is shown weirdly with CSS under Internet Explorer, but it works fine with FireFox The CSS'd page: http://www.trinijunglejuice.com/junglejuice_css.html The CSS: http://www.trinijunglejuice.com/css/styles.css The page it is meant to look like: http://www.trinijunglejuice.com/junglejuice.html If anyone can help me with a fix that'd be great Thanks I just made some css changes on my site yesterday to redesign some pages, and I can't tell if it's all messed up in internet explorer or not. I'm a mac user but I always borrow my roommate's computer to check changes in IE. However, I'm now having an issue where internet explorer doesn't seem to want to show the latest changes, and it even seems to move stuff around into different places when I refresh the page. I tried one solution that didn't seem to do anything, which was changing the option of "check for newer versions of stored pages" under IE Internet Options from "Automatically" to "Every Visit to the Page". The layout of the website looks fine in safari/chrome/firefox and also looks fine on firefox on the PC. I can't think of any other reason why internet explorer would be acting so strange by not showing the latest version and often changing when I refresh the page. A web site I am working on is artepizzeria.com and for some reason it is not rendering correctly in internet explorer version 6. The content is just disappearing completely. Your help is much appreciated. -Troy Oltmanns Hi, I am converting a wordpress theme to Farsi, which is an RTL language. Meaning I have to convert anything that is left to right. Everything has been great, except for the drop down menu. It shows fine in firefox (see link below) http://mytasvir.com/photo/gallery/24b060df15cc3b.gif But in internet explorer, the first level is shifted to the left (see image below) http://mytasvir.com/gallery/image/730/24b060e63235cb.gif In the CSS part below: Code: /* first level */
#pagenav li ul {
float:none;
position:absolute;
display: block;
width: 200px;
left: -999em;
margin-top: -1px;
when I change the position:absolute; to position:relative; the outcome will be as below: http://mytasvir.com/gallery/image/730/24b060f02b67c3.gif which is also not acceptable. What Can i do? I attached the part of style sheet which is related to the navigation, sorry I had to upload on rapidshare.... http://rapidshare.com/files/309492078/style.css please help! i really need help! How do I align menu elements of my menu? In Mozilla the elements are leaning conpletely to the left of the screen and doing somewhat what they're supposed to do in internet explorer. To put it simply I'd just like to have the same style class used to center the menu items in both Mozilla and Internet explorer. Heres the html page : Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" title="thisstyle CSS"></head><body>
<style>
body
{
background-color: limegreen;
<font FACE="Lucida Console">
}
</style>
</head>
<body>
<div id="menu">
<ul align="center">
<li><a href="users/register.php">Join</a></li>
<li><a href="users/Log_in.php">Login</a></li>
<li><a href="users/help/tour.html" >Tour</a></li>
<li><a href="users/contact.php">Contact</a></li>
</ul>
</div>
</body></html>
Heres the css style sheet : Code:
#menu {
clear: both;
margin: 30; padding: 0 40px 0 0;
background: url(menu.jpg) repeat-y center top;
font: bold 12px/26px Lucida Console;
height: 26px;
background: #006633;
}
#menu ul {
float: left;
list-style: none;
margin-top:0; padding: 0;
margin-right:0; padding: 0;
margin-bottom:0; padding: 0;
margin-left:90; padding: 0;
}
#menu ul li {
display: inline;
}
#menu ul li a {
display: inline;
float: left;
padding-top: 0px;
padding-right: 28px;
padding-bottom: 0px;
padding-left:8px;
color: gold;
text-decoration: none;
}
#menu ul li a:hover {
background-color: #ffff33;
color: #006633;
}
#menu ul li#current a {
background-color: #eee;
color: #333;
}
Thanks Hello, I have tried to do a div next to another div. This worked fine. However then in one div I placed thre other div's, and made them stay next to each other. Naturally one of them did not stay in the same line and wraped under neat the others. The problem is that the right div is now displaying well on FireFox, but incorect on Internet Explorer. (Altough when I set the borders I noticed that the border for the right div was wrong Here is my html code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
html {
min-width: 750px;
}
body {
margin: 0;
padding: 10px 0px;
background: #ff0000;
}
div#wrap {
width: 750px;
margin: 0 auto 10px auto;
padding: 0;
text-align: left;
background: #ffffff;
border: 1px solid #d1c7ac;
}
div#innerwrap {
width: 720px;
margin: 0 15px;
padding: 8px 0;
border: 1px sold #ff0000;
}
#body {
padding-top: 10px;
}
#left {
display: inline;
width:510px;
height:510px;
}
#box {
border: 1px solid #d1c7ac;
float: left;
color: #000000;
font-size: 8pt;
overflow: hidden;
width:250px;
height:220px;
}
#right {
height:510px;
text-align: center;
border: 1px solid #d1c7ac;
}
</style>
</head>
<body>
<div id="wrap">
<div id="innerwrap">
<div id="body">
<div id="left">
<div id="box" class="top-left">
Box 1.
</div>
<div id="box" class="top-right">
Box 2
</div>
<div id="box" class="middle-left">
Box 3
</div>
<div id="box" class="middle-left">
Box 4
</div>
</div>
<div id="right">
This is the right text
</div>
<br>
last line
</div>
</div>
</div>
</body>
</html>
Is there maybe a hack I can do to internet explorer so that this element will be solved? or my css is completly wrong, and I need to change it? Just a small explanation on the css; I have a div that contains boxes (left) and another div that just contains text (right). This should be placed next to each other since I did the display: inline; in the left div css. thanks for any sugestions, regards, sim085 I am trying to see what is the problem at my css with internet explorer , banner is appearing over the text however in firefox, safari or opera it works fine. Please check it he ucables.com css style used is he ucables.com/account/styles/ucables.css Please can you help me to find what is the problem i dont know what internet explorer bug is causing this problem THank you in advance So I seem to have a problem with IE5.x and IE 7. The white bar in #top-bar that is supposed to run along the bottom of my blue banner on my page, works fine in IE6. But it either of the other two browsers it just hugs the top of the page. It doesn't seem to want to obey the padding-top css directive. I'm not really sure why though. Can someone have a look at it for me ? Thanks in advance ... :-) http://www.EnglishTeachingKorea.com I am trying to see what is the problem at my css with internet explorer 6.0, all text is put at the bottom of the page, however in firefox, safari or opera it works fine. Please check it he ucables.com/search/iphone css style used is he ucables.com/account/styles/ucables.css Please can you help me to find what is the problem i dont know what internet explorer bug is causing this problem THank you in advance I'm completely stumped on this problem. I need part of this html page to have transparency, but then have completely opaque text on top of that. Since anything within a div with transparency automatically inherits that transparency, I decided to fix that by layering an opaque div over the div with transparency. This works wonderfully in FF3 and Safari. However, IE7 is giving me fits (no surprise here). The divs simply will not layer. I believe that the problem is because z-index is overloaded by IE7, but I can't find a workaround that works for it. Can anyone else? I really appreciate the help! The complete html is: <head> <title>Example</title> <style type="text/css"> body { margin:0px 0px 0px 0px; background-color:white; } .wrapper { height:425px; width:520px; background-color:cyan; margin-left:auto; margin-right:auto; top:0px; } .midbox { height:280px; width:520px; } .shaded { position:relative; z-index:0; height:95px; width:520px; background-color:yellow; filter:alpha(opacity=50); /* for IE */ -moz-opacity:0.5; /* for older browsers */ -khtml-opacity:0.5; /* for older browsers */ opacity:0.5; } .unshaded { float:left; position:relative; z-index:1; filter:alpha(opacity=100); /* for IE */ -moz-opacity:1.0; /* for older browsers */ -khtml-opacity:1.0; /* for older browsers */ opacity:1.0; height:95px; width:520px; } .bigName { position:relative; border-style:none; font-family:Arial Unicode MS; font-size:50px; width:250px; height:55px; } .bigUsername { position:relative; border-style:none; font-family:Arial Unicode MS; font-size:15px; width:250px; } </style> </head> <body> <form id="form1"> <div class="wrapper" > <div id="divTop" class="unshaded"> <table width="320px"><tr><td align="center"> <input type="text" name="theirName" value="Foo" size="15" class="bigName" readonly="readonly" /> <br /> <input type="text" name="theirUsername" value="bar" size="15" class="bigUsername" readonly="readonly" /> </td></tr></table> </div> <div id="divTopS" class="shaded"></div> <div id="divMid" class="midbox"> <!--some stuff here--> </div> <div id="divBot"class="unshaded"> <input type="submit" value="a button" /> </div> <div id="divBotS" class="shaded"> </div> </div> </form> </body> </html> Hey, I use floats in my page to position some div's. The page validates for both css and html-strict. When i run the code below in firefox, everything works fine. When i run it in Internet explorer, it does not. It looks messed up then. PHP Code: echo '<form name="contact_action" id="contact_action" method="post" action="process/contact_action.php?act=del">'; while($contact = mysql_fetch_array($query_result,MYSQL_ASSOC)){ echo '<div style="float: left; width: 25%; margin: 0%; padding: 0%;">'; echo '<input type="checkbox" name="selected_contacts[]" value="'.$contact['contact_id'].'"> '; echo $contact['first_name'] . ' ' . $contact['last_name']; echo '</div>'; echo '<div style="float: left; width: 75%; margin: 0%; padding: 0%;">'; echo '<a href="contact_info.php?contact_id='.$contact["contact_id"].'&act=edi">view</a>'; echo '<a href="process/contact_action.php?contact_id='.$contact["contact_id"].'&act=edi">edit</a>'; echo '<a href="process/contact_action.php?contact_id='.$contact["contact_id"].'&act=del">delete</a>'; echo '</div>'; } echo '<div style="float: left; width: 100%; margin: 0%; padding: 0%;">'; echo '<br>'; echo '<input type="submit" name="delete_selected" id="delete_selected" value="Delete Selected">'; echo '<br><br>'; echo 'Total '.$nr_of_rows.' Contacts'; echo '</div>'; echo '</form>'; hope you can help me. thanks in advance Hi guys and gals. I am having issue with setting opacity in Internet Explorer so all browsers that understand opacity get - PHP Code: background-color:blue;opacity:0.1.... and Internet Explorer gets - PHP Code: [....continued....]filter: alpha(opacity=50);width:100%;height:100% The height is set via JavaScript but it wasn't working so I set it as a constant and yeah it still isn't working. The width and height are both set so to trigger the filter. However it doesn't appear to be working and in Internet Explorer 7 the whole div is still a dark blue. However in both FireFox3 and Safari it is see through, so can anyone spot my issue? All contributions are welcome and thank you in advance. Jaz Hi folks, I'm working on a website at the moment and having some issues 'fixing it' for Internet Explorer. The design scrolls horizontally, and using 'position:fixed;' on certain elements keeps them on the page while the rest scrolls - this works fine in Safari / Camino / Firefox etc. but as we know position:fixed; is broken in IE. I tried applying the fix found at http://web.tampabay.rr.com/bmerkey/...tion-fixed.html but this only seems to work for regular vertical scrolling pages - when scrolled horizontally the "fixed" elements still scroll with the page. Is there any way possible to get this to work? I really really want to avoid any of those javascript "jumpy" scripts to reposition the element all the time. Thanks all. Hello, I currently have a site (left aligned) that has its own Javascript pulldown menu. Its is pretty standard with the sub-menu's being in their own layer and are shown on mouseover. My problem is that these sub-menus are currently set at an absolute left position (CSS) but, if centered, will appear in different places at different resolutions. Does anyone know if its possible to anchor a layer to a point from something on a different z-index? I did a search on the forums here and found a similar question but no responses. Thanks guys! Link: http://ajwells.org/mtmp/index.html How do I get the menu there to center on the screen? Ive tried a number of things and nothings worked as of yet. Or better yet, is there an easy way to make the menu on the left side going downward rather than left to right? Either would be great. thanks for the help. Hi, I thought I fixed this problem before. In the videos playlist at the bottom, video description (background black). It needs to be positioned 20 pixels down. You will understand it better if you view it in Firefox. http://pangeaadvisors.org/default.asp Code: #content #videos .playlist { float:left; width:442px; height:292px; margin:10px 0; background:#FFFFFF url(images/bg_videoplaylist.gif) repeat-x; background-position:-1px 0; border:1px solid #083684; position:relative; overflow:hidden; }
#content #videos .playlist .entries { position:absolute; width:10000em; height:60px; }
#content #videos .playlist .entries .video { float:left; width:422px; height:60px; font-size:14px; font-weight:bold; text-decoration:none; padding:20px; background:transparent url(images/player_entry.gif) 0 0 no-repeat; }
#content #videos .playlist .entries .playing { background-position:0px -80px; }
#content #videos .playlist .entries .paused { background-position:-432px -80px; }
#content #videos .playlist .entries .progress { opacity:0.8; }
#content #videos .playlist .entries em { float:right; color:red; font-style:normal; margin:14px; }
#content #videos .playlist .entries .description { float:right; width:442px; height:212px; background:#000 url(http://flowplayer.org/img/player/btn/play_large.png) right bottom no-repeat; }
#content #videos .playlist .entries .description p { color:#FFF; width:422px; height:192px; font-size:12px; font-weight:none; text-decoration:none; padding:10px; position:absolute; }
My website, currently http://12.214.26.185 does not render correctly in IE. It renders in Mozilla and Konqueror. I am posting my css file. Any advice would be greatly appreciated. |
|||||||