|
CSS - List Item Shifts In Ie Arrrrrgh
Of course, IE is being a P.I.T.A. I can't figure out why this is happening... but it's probably something so simple I'm overlooking it.
I have a set of images and/or links set up as a list and the last item on the first row shifts down. After that row, everything looks fine. No problems on FF, Chrome and Safari (Mac). See this page for example and view with Explorer: www[dot]cameronstevens[dot]ca/gallery[dot]html Thanks Similar TutorialsHi I am creating a navigation bar using unsorted list and CSS. I have given my CSS and HTML code here Code: #navcontainer
{
width: 200px;
margin-top:150px;
}
#navcontainer ul#navlist
{
width:200px;
clear:left;
text-align:left;
margin-left:0;
padding-left:0;
list-style:none;
font-size: 12px;
font-weight:bold;
line-height: 14px;
}
#navcontainer ul#navlist li
{
margin-left:0;
padding: 0px;
display: block;
list-style:none;
border-bottom: 1px solid gray;
}
#navcontainer ul#navlist li.last
{
border-right: 0;
background:none;
}
a.linkText {
padding: 10px;
display: block;
color : #444444;
font-family : arial;
font-size : 11px;
font-weight : bold;
text-decoration : none;
height:25px;
}
a.linkText:link {
color : Aqua;
/* you can define other styles if necessary */
}
a.linkText:visited {
color : Maroon;
/* you can define other styles if necessary */
}
a.linkText:hover {
color : Blue;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a class="linkText" href="#">Item One</a></li>
<li><a class="linkText" href="#">Item two</a></li>
<li><a class="linkText" href="#">Item three</a></li>
<li><a class="linkText" href="#">Item four</a></li>
<li><a class="linkText" href="#">Item five</a></li>
</ul>
</div>
The problem is, when I select the next list item, previously selected list item should come to the original color. Is there any way I can achieve this? Your guidence will be appreciated. Many thanks I have this little menu on this site: http://kris.dreamhosters.com/mhw/ When I view it in IE6 it is shifted to the left several pixels. Upon hovering over it, it shifts to where it belongs. I've done some search both here and on google and just can't find an answer. Fortunately it doesn't seem to do this in IE7, but I still like my pages to work in IE6. Any insight greatly appreciated. I have a list that I've created with the list-style-type being an image. For some reason, the space between the list-style-image and the list text differs in IE and Firefox. Has this happened to anyone else, or am I doing something incorrectly? Below is the code. The cell that these lists sit in has has an id of 'cellid'. Code:
#cellid {
margin: 0 0;
padding: 0 0;
}
#cellid ul {
margin: 10px 0 0 20px;
padding: 0 0;
}
#cellid li {
margin: 0 0;
padding: 0 0;
list-style-image: url(images/idxyellowlist.gif);
}
The ul has a margin of 20px on the left to line up with an element above it. Does anyone have any ideas as to how to get around this space? Thanks, Brian I've been struggling with this a bit. I would rather not use a container div for my lists, but it seems that it's not possible to assign the lists themselves a width. When I assign a width to the <ol> element, I lose the numbers under the margin on the left, which I can sort-of understand. If I assign a width to the <li> elements, it works fine in Firefox, but IE drops the number on the first <li> and changes the numbers on each following <li> to "1". Please look at the bottom of this page in FF - http://certified.tmhdesign.com The li elements have a margin-left or the ul a padding left. Can someone help me out? Here is my css ul#hp_offers{ width:600px; margin:0 0 0 10px; border:1px solid #e0e0e0; } ul#hp_offers li{ padding:3px 5px 3px 25px; border-bottom:1px solid #e0e0e0; list-style:none; list-style-type:none; margin:0; } li.even{ background: #f1efef url(../images/offer_even_bullet.gif) no-repeat 10px 7px; } li.odd{ background: #e0e0e0 url(../images/offer_odd_bullet.gif) no-repeat 10px 7px; } Hi all, and thanks for reading. The following code looks fine in Firefox, but has huge spaces between the images in IE 6. CSS: Code:
#menu {float:left; width:157px; background-color:#FFFFFF;}
#menu IMG {display:block; margin:0; padding:0;}
#menu UL {list-style-type:none; margin:0; padding:0; background-color:#FFFFFF;}
#menu UL LI {margin:0; padding:0;}
HTML: Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
...
<div id="menu">
<ul>
<li><a href="../balloons/" title="Balloons"><img src="../images/menu-balloons.gif" alt="Balloons" width="157" height="37" border="0" /></a></li>
<li><a href="../centerpieces/" title="Centerpieces"><img src="../images/menu-centerpieces.gif" alt="Centerpieces" width="157" height="37" border="0" /></a></li>
<li><a href="../supplies/" title="Supplies"><img src="../images/menu-supplies.gif" alt="Suppliers" width="157" height="37" border="0" /></a></li>
<li><a href="../contact/" title="Contact Us"><img src="../images/menu-contact.gif" alt="Contact Us" width="157" height="37" border="0" /></a></li>
<li><a href="../" title="Home"><img src="../images/menu-home.gif" alt="Home" width="157" height="37" border="0" /></a></li>
</ul>
</div>
Thanks in advance. -colin Is there any way to have horizontal list items automatically fill any given width? for example, If I have 5 list items, I can set each width to 20% and the list will fill the width of the container, but if I don't set a width, then they collapse to the left. the behavior I'm after is like a table. The 'old' way to create a horizontal list would be to create a table with one row and 5 cols. Setting the width of the table to 100% would make each cell 20% automatically. Any way to accomplish this in css without explicitly setting the width? Hey everyone, After doing some reprogramming of the site I was making I'm having troubles with lists. I can't set the width of the li or a so that the size takes shape. I can't figure out why, or how to do it. I know I've done it before but the code i used there just doesn't seem to want to work. The LI and A tags take the size of the text within. I've checked the resources I could find in the sticky and that kravitz gave me and they seem to be able to set width but it's just not working. here is my css Code:
#menu{
width:750px;
border:thin solid #000000;
}
#menu ul{
margin:0;
padding:0;
width:750px;
display:inline;
}
#menu li{
width:150px;
display:inline;
border:thin solid #000000;
list-style-type:none;
background-color:#550210;
}
#menu a{
width:150px;
}
If I take out the display:inline the width takes shape but when I put it back in it resizes to the size of the text within. I am having trouble with my navigation. it works fine in safari and firefox, but when i try it in IE for the PC the main navigational elements don't move. does anyone know why? www.iconiqdesigner.com thanks! I am really stumped -- I need to stack images on top of one another using an unordered list but I get a few pixels of whitespace at the bottom no matter what I do. I know this could be acheived using divs instead but I would like to figure it out using lists. I broke the code into as simple a form as possible and put it below. Removing everything between the </li> tag and the next <li> tag does not work. I tried adding "height: 20px;" under "#nav ul li" to force the images to stack on top of each other -- this works in Safari and Firefox but not in IE Windows. If I remove the DocType tag or switch it to xhtml transitional the images do stack in Safari but not in Firefox or IE. Am I missing something here or is this just not possible? Appreciate any help. The code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css list test</title>
<style type="text/css" media="screen">
img {
border: 0;
}
#nav {
padding: 0;
margin: 0;
}
#nav ul {
padding: 0;
margin: 0;
list-style-type: none;
}
#nav ul li {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><img src="http://test.mightylab.com/images/colors/blue.jpg" width="40" height="20" /></li>
<li><img src="http://test.mightylab.com/images/colors/yellow.jpg" width="40" height="20" /></li>
<li><img src="http://test.mightylab.com/images/colors/red.jpg" width="40" height="20" /></li>
</ul>
</div>
</body>
</html>
First of all, I hope this makes sense - I just spent two hours nonstop tweaking the navigation on my first client's site, and my brain and eyes are a bit frazzled. I have the navigation in a list, displayed horizontally in a Suckerfish dropdown. The container is elastic but the navigation is not; I want it to stick to the right side but move to the left when the browser is made narrower. Floating it to the right works perfectly.. But it reverses the order of my list items so that "Home" is to the far right instead of the left. Is there any way to reverse the order of the list items without touching the HTML? Going for full accessibility here, so I obviously don't want to reverse the item order in the HTML. I could probably figure this out on my own but it would take time, and like I said.. My brain is a little wonky right now Thanks in advance! I've been using CSS for a couple of days now, and am a bit stuck on how to change the main background image in the body when I hover over a menu item on the side bar. Changing the menu item background seemed easy enough. But, I suspect I am missing a key piece on how to get access to a body style from inside a list style. Here is the short section I am working on, with the full CSS file shown below that. This validates with a couple of warnings about my black on black color selection. I would certainly appreciate any help with this. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>HOTWORKS</title> <link rel="stylesheet" href="stylz.css" type="text/css"> </head> <body class="top" id="bdy" > <!-- Site navigation menu --> <ul class="navbar" id="navlist"> <li><a href="tools.html"><br>Tools</a> <li><a href="glass.html"><br>Glass <br> Artwork</a> <li><a href="pottery.html"><br>Ceramic<br> Artwork</a> <li><a href="about.html"><br>About</a> </ul> <!-- Main content --> <h1> </h1> <p> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> TOOLS - ART - MISCELLANEA <br> <address> </address> </body> </html> Code: #navlist a:hover {
color: #1e5ebd;
background:url("images/drawer4b.jpg") no-repeat;
background-repeat:no-repeat;
background-position: 0px -10px;
color:#FF0000;
/* how do I do something like this
body.top { background-image: url(images/tabtool.jpg) ; }
*/
}
Just to be complete, and in case there is something in here that you might need, here is the full css file: Code:
body.top {
padding-left: 11em;
font-family: Fantasy, "Times New Roman", Times, serif;
font-size:15px;
color: #000000;
/*background-image: url(images/tab3.jpg) ; */
background-position: 210px 10px;
background-repeat:no-repeat;
background-color: #000000;
margin-left:5cm;
}
body.top { background-image: url(images/tab3.jpg) ; }
ul.navbar {
color: #000000;
list-style-type: none;
position: absolute;
display:block;
float:left;
left: 1em;
}
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif
}
ul.navbar li {
text-align:center;
/* vertical-align:100px; */
background: #000000;
border-right: 1em solid black;
}
ul.navbar a {
text-decoration: none ;
top:10%;
height:4em;
}
a:link {
color: white }
a:visited {
color: white }
#navlist {
font-family:Arial, Helvetica, sans-serif;
font-size:.8em;
font-weight:bold;
list-style:none;
}
#navlist a {
display:block;
width:144px;
height:137px;
color:#fff;
text-decoration:none;
background:url("images/drawer4.jpg") no-repeat;
background-repeat:no-repeat;
background-position: 0px -10px;
}
#navlist a:hover {
color: #1e5ebd;
background:url("images/drawer4b.jpg") no-repeat;
background-repeat:no-repeat;
background-position: 0px -10px;
color:#FF0000;
/* how do I do something like this
body.top { background-image: url(images/tabtool.jpg) ; }
*/
}
#navlist a:active {
background:url("images/drawer4b.jpg") no-repeat;
background-repeat:no-repeat;
background-position: 0px -10px;
color:#FFC741;
}
I would like the link colour to change and the background of the <li> to change as well. I can't figure out what CSS to use for it though. I have made bold and underlined the li I want to change on hover. Code: <li id="menuitem_2mainnav"> <a id="menulink_2mainnav" class="mainlevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=2">Meetings</a> <ul id="menulist_2mainnav"> <li id="menuitem_2_1mainnav"><a id="menulink_2_1mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=14">TEST 1</a></li> <li id="menuitem_2_2mainnav"><a id="menulink_2_2mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=15">TEST 2</a></li> <li id="menuitem_2_3mainnav"><a id="menulink_2_3mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=16">TEST 3</a></li> <li id="menuitem_2_4mainnav"><a id="menulink_2_4mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=17">TEST 4</a></li> </ul> </li> I have tried: Code: #menulist_2mainnav li:hover{ color:#000000 !important; }
But it doesn't change the links text colour. Can someone help me with this? The link as well as the box it is in shifts when I hover over the link. I have searched in this forum and Googled it, but still cannot figure it out. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>shift</title>
<style type="text/css">
#shift {
width:60%;
margin-left:2%;
padding:1%;
background-color:gray;
}
a:hover{
color: black;
background-color:#899B80;
}
</style>
</head>
<body>
<div id="shift">
<div>
<a href="#" rel="bookmark" title="title">When you hover over this link it shifts and the box it is in shifts as well.</a>
</div>
</div>
</body>
</html>
Hello all, I have validated my site in the w3c site. I am checking it on different browsers. For IE, my site appears the way i want it to but when i test on Firefox version 2.0. One of my divs shift upwards for some reason: Here is the CSS concerned: Code: #login{
width:180px;
background-color:#EBEBEB;
border-top-color:#8cacbb;
border-top-style:solid;
border-top-width:1px;
border-bottom-color:#8cacbb;
border-bottom-style:solid;
border-bottom-width:1px;
border-right-style:solid;
border-right-color:#8cacbb;
border-right-width:1px;
text-align:left;
text-transform:none;
line-height:20px;
color:Black;
padding:0px 0px 0px 0px;
margin:0;
list-style:none;
}
#login li{color:#436976;
margin-left:-28px;
/*display:list-item; */
list-style:none
}
#login li.head{margin-left:10px;
/*display:list-item; */
list-style:none
}
This div goes over another div. Not sure if this is relevant but the div it goes over uses php to require some text from another file. This is its CSS, the one that it goes over. Code: #header {
width: 950px;
height: 100px;
margin: 0; padding: 0;
font-size: 14px;
color: #FFF;
}
Actually, both divs have their contents from a php file. I use the require_once() function. As you can see i am more of a coder than a designer and i am struggling with the CSS! http://loganagency.com/temp/index.php Please click there and view in IE and then in Firefox. The div is completely shifted upward and the baber overlaps the text in FF but looks fine in IE. What is wrong and how can I avoid this in the future? While we are on the subject, what gives with IE vs FF web design? Everyone posts errors here. Is there a tutorial or post that describes the reasons they process code so differently and ways to prevent it? Hi, I am fairly new to CSS and learning but came across something. When I click on links to go to other parts of my site, the container on 2 pages only shifts a little. I even used the template I created for the index for the other pages and the CSS is the same. I notice this happening on Firefox. IE 6/7 the page looks fine. Any reason for this? Thanks Code:
#container{
margin-top: 0px;
margin-right:
auto;margin-bottom: 0px;
margin-left:
auto;width: 760px;background-color:#ffffff;
border: 1px solid #6785b3;
font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 12px;
color: #666666;
height: 950px;
}
i have a site that if the page isn't cached, some of the content starts like, at the top of the page and then shifts in to it's positioned place. why does this happen? how can i stop it? I'm not sure if this is an HTML problem or a CSS problem, but since it seems to be a display issue, I'll start here. I have an annoying minor display issue on my site , the solution to which has alluded me for some time. The pop up menues are created using CSS specificity but I'm thinking that has no bearing on the issue because the menues aren't the only place the problem occurs. In a number of places, I have implemented mouseover effects using the :hover pseudo-(class/element). In instances where the hovered content requires more screen space (to add a border or text decoration, etc) the whole page gets shifted a pixel or two (however much it takes to add the effect). I've tried adding transparent borders around the static images and increasing line height around text, but to no avail. Any suggestions? |
|||||||