This question is based on this JSFiddle. It is a navigation design with two top level menu items and three submenus (structured for accessibility without script). An element to look at may be:
<nav class="top-menu">
There is one pressing issue:
Just open the JSFiddle in Internet Explorer and see. Why does it drop down like that only in IE? Even in IE9 and 10.
Any help here will be greatly appreciated!
I have noticed that "top-header" blocks had different heights, and to fix this I've added line-height CSS rule:
.top-header {
padding: 0 0 5px 0;
display: inline-block;
margin-left: 20px;
position: relative;
+ line-height: 28px;
}
And it currently seems same for me in IE and Chrome.
Updated fiddle
add
height :136px \0/;
at the end of .top-header
and the problem will be solved check
jsfiddle
You may use some 'tape' to fix this in IE. :)
Via CC, add a border-bottom: white 10px solid; or outline:white 10px solid;
http://jsfiddle.net/SKJvv/7/ http://jsfiddle.net/SKJvv/8/
It doesn't explain much what layout is playing about.
(CC included : http://jsfiddle.net/SKJvv/10/ )
Related
I have a control that I am trying to highlight when it is selected. I'm achieving this using padding on a div and some positioning so that it surrounds the control. The problem I'm encountering is that the padding on the highlighter div renders differently in chrome and in firefox. Everything I've read says that they render the same so this shouldn't be a problem.
Chrome:
Firefox:
Here's a fiddle that has the problem on it:
http://jsfiddle.net/5fuGB/1/
.control{
position: absolute;
width: 100px;
height: 20px;
top: 30px;
left: 300px;
z-index: 1;
}
.highlighter{
background-color: orange;
position: absolute;
width: 100%;
height:100%;
left: -2px;
top: -2px;
padding-right: 8px;
padding-bottom: 10px;
z-index: -1;
}
input{
width: 100%;
height: 100%;
}
My Chrome Version:
Version 31.0.1650.63 m on Windows 7
My Firefox Version:
25.0 on Windows 7
Thanks for any help you guys can offer.
I believe the difference you are seeing is a difference which comes from the user agent stylesheet, browsers have their own default stylesheets which they use to render things like input elements. In your case it is probably a difference in the padding applied to the input element. You should specifically set eg: padding: 0px; or padding: 1px; on the input element, and then work out how to get it to look right for an input with the specified fixed padding. This will then override the styles set by the user agent style sheet.
Update
I moved to my Windows PC to have a go at fixing it. One way to fix this using one of the vendor specific prefixes from the answer linked in the comments is to add -moz-padding-end: 6px; to .highlighter to compensate for the differences in padding between browsers.
Here's a jsFiddle which fixes your issue, a footnote tho, I can already tell you that this probably won't fix it on Chrome for OSX, which was also rendering things the Firefox way.
Another way to fix this is by adding -moz-padding-start: 1px; -moz-padding-end: 1px; to input, but doing so somehow changes the bottom padding as well, which makes things look not as pretty in Firefox as with the other fix.
I'd go about it differently. Instead of using an extra div, I'd recommend using a combination of border-color and box-shadow on the input's :focus state to achieve the effect you're going for.
Check out this modified fiddle: http://jsfiddle.net/5fuGB/2/
Just experienced the same issue with my code, and fixed it too. The trick is if you use display: inline-block then line-height makes sense. Try it when debugging your code.
You're doing a little more than what's necessary. To get a highlight around that input you can use :focus
So it would be something like this:
CSS
input {
border: 1px solid white;
}
input:focus {
border: 1px solid orange;
}
That will give the input a white "invisible" border so it doesn't move the input when you click into it. It will simply change the border color to orange to get that highlight effect you're looking for.
EDIT
Just saw your comment. I dont have the rep to comment so I'll just add on to this.
If you aren't using the inputs as actual inputs, then I would just make them divs. Inputs render differently by default so that would mess with consistency across browsers.
I'd also recommend experimenting with those divs within one another and making the most outside div relative.
Outside Div <------ position:relative;
Middle Div <------- position: absolute;
Inner div <-------- position: absolute;
Also, if you need a selected state but don't want or are hindered by inputs then I'd recommend jQuery for modifying the css based on user interaction.
I have used font-size: 0; on the parent element and that's how I got the links to have no spaces but the space is still there in Firefox.
Please test this in Firefox and then any other browser and you'll see that Firefox is showing a space (albeit 1px) between the links where as no other browser is doing this... well IE6&7 but lets not talk about them...
http://jsfiddle.net/uZMzA/
Does anyone know why? And how I could go about and solving it without using javascript to determine the browser?
The reason why this is happening is because there is a text-node with a line-break in between the a-tags. And since you have set letter-spacing: 1px; and the firefox coders have chosen to implement letter-spacing the way they have, you get 1px of letter spacing after or before that textnode.
The solution, as already hinted at elsewhere, is to change the rule for div#navigation to not have the line letter-spacing: 1px in it, like this:
div#navigation {
position: relative;
padding: 1px 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
font-family: Georgia, Serif;
margin: 0 auto 2px auto;
width: 400px;
font-size: 0;
text-shadow: 0 1px #fff;
}
You can see a working version with the fix applied here: http://jsfiddle.net/uZMzA/10/
maybe you mean:
letter-spacing: 0
This cause your "bug"
Edit:
If you want the letter spacing at 1px, this is a good solution, fiddle up
Just adding:
display: inline-block to the Div container css and float: left to the a element.
Read this post. You will find all available techniques on its body and comments, as well as their tradeoffs.
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
The "remove the spaces" option is mentioned first, as it's the easiest to implement. But it's also "a bit funky".
The "letter-spacing - based" option is listed in the comments, but notice that you will have to include additional css if you want to make IE < 8 happy.
Simply remove the white space from your code like this jsFiddle example.
HTML:
<div id="navigation">
Link1Link2Link3Link4
</div>
This is silly and I can't really explain the "why" of that occurrence but here are two ways to correct the display.
FF doesn't like the space in the code. Either remove the carriage returns between your <a> tags or comment them out, like this:
<div id="navigation">
Link1<!--
-->Link2<!--
-->Link3<!--
-->Link4
</div>
So, I have an issue with the hover state of a link in IE8. Code is as follows:
<div id="navigation">
Home
</div>
And the CSS:
#navigation {
float: right;
height: 29px;
margin: 50px 0 0 23px
}
#navigation a {
color: #FFF;
float: left;
font-size: 120%;
height: 25px;
margin-right: 7px;
padding: 2px 10px;
text-align: center;
width: 104px;
}
#navigation a.home {
background-color: #f4e034;
}
#navigation a.home:hover {
background-color: #fffbd4;
}
Now, this works fine in every other browser I have tested in (Chrome, Safari, FF, IE6, and IE7), it just won't change the background color of the link in IE8 on hover.
I have tried adding display: block and display: inline-block to the a element. I have also tried adding !important after the background-color in the hover tag. I have also made sure that there are no other elements in the CSS that is affecting this.
Googling this problem gives me a bunch of things regarding the IE8 beta, which this is not. It also gives me answers for menu related links, which this is not. It gives me answers for things being affected that aren't background-color. And it gives me things where changing the font-color works, but not the background-color (neither works in my case).
Just wondering if anyone else has ever noticed this issue and has something they can provide on this. Let me know, thanks in advance.
I had the seem problem as yours. I tried every way as you did but it has no use.
My final solution was to set a background-color on the element you need to hover, then it worked.
I felt shocked at that time and I don't know why still now.
Do you have a DOCTYPE specified on your HTML page? It might seem obvious, but I've had similar problems with the :hover state in IE8 - especially when editing old sites.
The solution for me was to add a DOCTYPE above the opening HTML tag on your HTML page
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
I hope this helps!
So lets just say i got it all to work on IE since its always IE that gives the problems. But now the dropdown menu appears behind the content on other browsers like firefox and chrome. All i did was remove the z-index in the #head div.
Website: http://www.stingrayimages.ca/
With Z-index: it breaks in IE
Without it it fails in other browsers.
Anyway to fix the dropdown menu without adding z-index to the head div?
#head {
position:relative;
height: 140px;
width: 100%;
background: #FFF;
filter:alpha(opacity=93);
padding-top:20px;
/* CSS3 standard */
opacity:0.93;
-moz-box-shadow: 0 0 5px black;
-webkit-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
}
You need to lessen the opacity. The drop down is washing out when it is displayed over the images and that is making it look like it is behind the pictures.
Also, IE9 shows the same problem as Chrome and FireFox 4.
Use z-index, just apply a higher z-index to the drop down elements that sit on top, or you could apply - z-index values to all content behind, either way works.
One thing you can do is put the z-index back and look up the IE fix for it.
Another thing to consider is the rendering order and tree structure of your html, as that influences what sits on top. http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/ this article explains it far better than I can.
If you are able to link an example of the site you're working on, it might make it easier for us to give a more specific answer.
I've styled some unordered HTML lists and their heading to look like this in Firefox:
alt text http://img24.imageshack.us/img24/711/screenshot001nij.png
Unfortunately, in IE7, they look like this:
alt text http://img11.imageshack.us/img11/8343/screenshot002e.png
The relevant HTML is
<div class="list-column">
<h4>Types de pêche</h4>
<ul>
<li>Pêche en lac</li>
<li>Pêche en Rivière</li>
</ul>
</div>
And the CSS is:
.list-column {
float: left;
margin-right: 20px;
width: 20em;
}
div.list-column h4 {
background-color: #FDD041;
padding: 5px !important;
}
ul li {
background-image: url(images/arrow.gif);
background-position: 0 11px;
background-repeat: no-repeat;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: 6px;
margin-left: -20px;
margin-top: 2px;
padding: 2px 0 2px 18px;
}
I suspect the fact that the div containing the list is floated left is probably the root of my problems, but I'm not sure how to workaround the poor display in IE7?
Update:
I tried adding a 'zoom: 1' property to the 'ul' elements to see if giving the elements 'layout' would fix the problem in IE, but it didn't.
The problem is definitely not related to the rounded corners. I turned them off temporarily but it didn't change anything in IE (apart from the appearance of the corners).
Thanks,
Don
IE and the other browsers have a different default style sheet.
IE indents list items by putting a ‘margin-left’ on the <ul>. The other browsers put a ‘padding-left’ on the <ul>.
So if you want to look the same in all browsers, set both ‘margin-left’ and ‘padding-left’ explicitly on <ul>. In your case, you would want to add something like “margin: 0; padding: 24px” on your “div.list-column ul, ul.round” rule.
(The default list ‘margin-left’ in IE is, to be precise, ‘30pt’.)
A common solution for this is setting the width of the element. This will make IE everything inside the bounds of that width.
I think this is a case of IE-7 auto indending the li's
the easiest way to debug this is to install IE-8; switch to compatible ie-7 mode.
then launch the developer tools from the tools menu
You can then inspect the individual elements and check if there are hidden padding or margins being applied
I think that it can depend from different default padding on ie and firefox. Try to use reset.css in your code if you haven't already done it.
P.s. in ie8 you have developer tools which are similar to firebug. Try to use them and see if you can't understand the issue...