Can anyone tell me why the absolutely positioned navigation buttons in the top right corner of this page are not visible in ie7, but are working fine in all other browsers (including ie8 and 9)
Thanks!
For one you are using display:inline-block which isn't properly supported by IE7 or below (sometimes it works, others not -- depends on the element and the situation).
Use display:block and float:left instead as this is more supported (however if you see my first link you can using display:inline too).
Don't forget to include overflow:hidden in the surrounding UL element either otherwise you'll get strange results due to the float.
css:
#navlist {
list-style: none;
margin: 0;
padding: 0;
display: block;
overflow: hidden;
}
#navlist li {
list-style: none;
margin: 0;
padding: 0;
display: block;
float: left;
/* your styles from before */
background-color: #F2F2F2;
border-radius: 5px 5px 5px 5px;
color: black;
height: 20px;
padding-top: 2px;
text-align: center;
width: 20px;
}
markup:
<ul id="navlist">
<li id="li1">
<a id="link1" href="#">1</a>
</li>
<li id="li2">
<a id="link2" href="#">2</a>
</li>
<li id="li3">
<a id="link3" href="#">3</a>
</li>
<li id="li4">
<a id="link4" href="#">4</a>
</li>
</ul>
useful links:
http://aaronrussell.co.uk/legacy/cross-browser-support-for-inline-block/
http://www.quirksmode.org/css/display.html#t03
update:
Another thing you could try (if the above doesn't solve the problem) is to temporarily remove your conditional commented code for IE7 - just to make certain there isn't anything in there causing a problem:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" />
<script type="text/javascript" src="Scripts/ie7.js"></script>
<![endif]-->
update:
Now that I've been able to actually test in IE7 the problem shows up if you enable borders - using css borders to debug is always a good idea :) The problem above is being caused by an child element pushing out the width of your parent element innerWrap. This wont affect more modern browsers, but IE7 and older always try and wrap their children no matter where they are placed or what size they are (unless you override this behaviour). Because your child element slideWrap is 3000px wide, it is causing your right positioned elements to vanish off the edge of the screen.
The following css should fix it:
#innerWrap { width: 100%; }
Use left or right properties with it in order to make them visible.
Related
I have a strange issue with google chrome:
With the following code:
<li class="smallAds fleft">
<a href="news">
<img class="addBorder" src=".." alt="Dialetu news!" />
</a>
</li>
The li element on firefox and other browsers is 190px width but on chrome is 190.016px. This small diference is enough to ruin the layout.
Anyone knows why this happens?
This only happens on Chrome for mac, on windows it works perfectly. Also my css rules don't have the width for the li element, since it should inherit the width of the img.
The relevant CSS here is the one associated with the image, since the above elements don't have any specific style:
#afterSlideShowSection ul li img {
border-right: 2px solid #fff;
box-sizing: border-box;
height: auto;
margin-top: 2px;
width: 190px;
}
Seems to be an issue in chrome:
https://code.google.com/p/chromium/issues/detail?id=491328
I've created a top level menu with dropdowns but the drop down isn't coming to the front in IE. Chrome, FF, and Safari work great.
My code looks like this:
<li id="search"><a href="#search" class="drop" >Search</a>
<div class="drop2columns dropcontent">
<div class="col_2">
<ul>
<li id="search_basic">Test1</li>
<li id="search_advanced">Test2</li>
</ul>
</div>
</div>
</li>
The css files look like this:
#menu .drop2columns {width: 130px;}
#menu .col_2 {
display:inline;
float: left;
position: relative;
margin-left: 15px;
margin-right: 15px;
z-index: 9999;
}
#menu .col_2 {width:130px;}
What am I missing? Like I said this only happens with IE (versions 7,8, and 9)
z-index and IE was always a nightmare.
There's several workarounds about, see
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
for one of them.
z-index doesn’t work correctly in Internet Explorer: positioned elements create a new stacking context, starting with a z-index of 0. To get around this you can make the parent element positioned (e.g., position: relative), and set its z-index to a value higher than that of the child.
I have a <ul> which contains many lis and divs. The li's are autogenerated from inputs and labels, and the divs are floated right and serve as tooltips to explain each input.
The code is something as follows:
<ul>
<div>tooltip</div>
<li>input</li>
<div>tooltip</div>
<li>input</li>
<div>tooltip</div>
<li>input</li>
</ul>
This works fine in firefox and IE8, but in IE7, it assumes that each div is part of the previous <li>, and completely drops the </li> tags from the interpreted source code (found out from IEtester's View Source Code dev tool). Anyone know why this is happening and how to ammend it?
CSS:
.tooltip { float: right; width: 140px; font-size: 0.9em; padding: 9px 9px 9px 15px; margin-top: 15px; }
You can't have div inside the <ul> directly. They can go inside the <li> elements though. This may or may not help with the problem you're having but should be fixed to make sure it isn't the cause.
<ul>
<li>input<div>tooltip</div></li>
<li>input<div>tooltip</div></li>
<li>input<div>tooltip</div></li>
</ul>
I'm building a navigation using the simple <ul><li></li><ul> system and floating them to the left side so they appear inline. The follow code works in all browsers except IE 6.
The HTML
<div id="sandbox_container">
<div id="sandbox_modalbox">
<div>
<ul id="sandbox_modalbox_nav">
<li id="Intro" class="modal_active">Item 1</li>
<li id="Queries">Item 2</li>
</ul>
</div>
<!-- more content here -->
</div>
</div>
The CSS
#sandbox_container {
min-height: 385px;
width: 940px;
padding-bottom: 20px
}
#sandbox_modalbox {
width: 940px;
padding-top: 5px;
margin-bottom: -10px;
}
ul#sandbox_modalbox_nav {
width: 936px;
height: 52px;
margin: 0px 2px 0px 2px;
padding-top: 0px;
display: block;
}
ul#sandbox_modalbox_nav li {
height:52px;
float: left;
list-style: none;
padding: 0px;
display: block;
}
ul#sandbox_modalbox_nav li a {
padding: 12px 30px 0px 30px;
height: 52px;
display: block;
}
I also put it up on JSBin.
I understand the problem is that I must define a width for the <li> for IE to float it properly, however I would prefer these remain variable width. Is there anyway to float them properly without restricting the width?
If I am understanding the problem correctly then in browsers other than IE6 the list items appear next to each other, but in IE6 they appear on top of each other.
If this is the case, it may be because the a elements are not floated even though their containing elements are. I would just use a conditional comment and add the following for IE6 only:
ul#sandbox_modalbox_nav li a { float:left; }
Also, Neall is right on track with the whitespace issue, even if it doesn't fix your current display problem it may cause some unwanted space to appear between items later.
Not that I can think of, I can't imagine how to declare a width that can change, except by defining it in ems. If you have a content that you know is likely to be less than ten characters, then width: 11em; padding: 0.5em 1em; is likely to offer enough space for the content while still defining a width.
IE 6 has some bugs with whitespace between <li> elements. Try putting all your list items on the same line with no space between them.
Edit: On further inspection, I don't think the whitespace is your problem. Your example has a lot of extraneous styles - it's hard to tell what the problem is.
I usually solve this by setting the floated list items to width: 0 for IE6. This for one reason or other causes them to have the correct dynamic width.
You can either do this in a conditional comment:
<!--[if lte IE 6]>
<style type="text/css">ul#sandbox_modalbox_nav li { width: 0; }</style>
<![endif]-->
Or simply take advantage of IE's lack of support for CSS selectors, by setting the width to 0, and then back to the default "auto" for modern browsers:
ul#sandbox_modalbox_nav li { width: 0; }
ul#sandbox_modalbox_nav > li { width: auto; }
For some reason this class outputs ok in IE but in Firefox the words and the lines ( | ) are not centered:
.horz_list li {
display: inline;
background-color: #CEE3F8;
border-right-style:thin;
padding-right: 4px;
padding-left: 4px;
}
This is the page for the output:
<div id="top_nav">
<ul class="horz_list">
<li>Nuevas</li>
<li>Comentarios</li>
<li class="last">Enviar</li>
</ul> <!-- ul.horz_list -->
</div> <!-- top_nav -->
If anyone know why is this, thanks.
Try changing the li's properties
.horz_list li{
display: block; /* block level */
float: left; /* float them inline to the left */
overflow: hidden; /* this will force the div to stretch to it's contained element */
background-color: #CEE3F8;
border-right-style:thin;
padding-right: 4px;
padding-left: 4px;
}
... or if you want what Ben described, the whole block centred, use
.horz_list {
margin: 0 auto;
}
Ensure it's containing block has a width, even if it's 100%.
If you're trying to get your list items to be horizontally centered, this is accomplished differently in IE vs. other browsers. Try setting margin-left:auto;margin-right;auto on your <ul>:
.horz_list {
margin-left: auto;
margin-right: auto;
}
Probably the reason for the extra spacing in Firefox is that if you set the LI as display:inline, the newline in your HTML code creates an extra space (just like if you type "lorem(newline)ipsum" the words may appear side to side in the page with a space between them).
Try, for example, to stick the <LI> tags together like this <li>....</li><li>.... and I think this will remove the unwanted spaces.
If you don't like to put it all into a single line, alex's suggestion works, but you may have to add a <div style="clear:both"></div> after the closing UL, because of floated elements.