It looks like my website does not look good in ie7 (see screenshot below)
My menu supposed to be horizontal is vertical, and facebook & twitter buttons are above each other and not next to each other.
Is there a way to fix these 2 issues?
Many thanks,
Here you go:
http://jsfiddle.net/aKPgt/
In a nutshell, change:
display:inline-block;
to
display:inline;
and add:
float:right;
Just remember, you need to REVERSE the order of your menu items in your unordered list, since
you're floating RIGHT instead of LEFT.
"My menu supposed to be horizontal is vertical"
This type of IE7 problem would typically occur if you were trying to make a set of <li> or <div> tags take display:inline-block -- which works in IE8 and current versions of the other browsers.
The problem is, IE7 respects display:inline-block, but only on elements that are, by default, inline such as <span> or <a>. So it just keeps them as blocks, and so they stack vertically.
I would try applying float: left; to both #nav > li and #nav a.
That should fix the vertical stack issue with IE7.
Related
I am currently working on some client work and I make use of a simple dropdown menu i built. It seems to work fine in most browsers, except for IE. Debugging has been a real pain as IE doesn't really offer much insight and I haven't been able to pin point the exact issue.
The dropdown is a div that has position: absolute and contains three <ul>'s. From what I can tell, the div is positioned alright, but the first ul is twice the width its supposed to be, with no clear reason and thus making it seem like the entire dropwdown is not alligned properly.
The dropdown can be found here: fatumdemo.platonlearning.com. Moving over the menu items in the top menu (blue) you can see the issue.
The code is very lengthy to all post here, but in case more information about the structure and CSS is needed, I'd be glad to post it.
Joey,
1) #navigation ul li --->to add position:relative property
2) #navigation ul li .dropdown -----> Put width:450px to 500px
3) #navigation ul li .dropdown ul -----> put width:160px or something higher.
Main problem reason is width and relative, when you add absolute position relative is must of the parent element and width and height are must it absolute element
The problem was with the fact that i was using elements other than li's as children of a ul. Internet Explorer apparently doesn't tolerate this behavior, unlike all the other browsers and treats the other elements as list-items, hence my dropdown being put in the wrong list-item in IE.
I am working on a website that has these tabs at the top which I need to have automatically spaced inside a div. The reason for this, is that the div below it has a border that needs to line up with the borders on the tabs. See my jsfiddle below for what I'm talking about. I currently have them all spaced correctly, but the nature of this site is that the words in the tabs will change, making my spacing incorrect. How can I automatically space them inside my div so I don't have to tinker with all the individual padding to make them line up with the div below?
http://jsfiddle.net/g7c5X/
Should be able to achieve it by adding to your CSS something like this:
#navMenu ul {display:table; width:100%}
#navMenu li {display:table-cell}
I think older versions of IE may ignore the display type can't remember which. The other option would be some javascript to calculate the margins.
I made a navbar and it works perfectly in all browsers except IE7. Below is a link to an example. Here is a quick explanation of what Im trying to accomplish. The navbar is wrapped in a ul and floated each list item to the left this works perfectly in all browsers except IE7 in which case each li item is on its own line and all but the first one is hidden, because the ul has a set height. I tried everything I could think of (even changing display modes) and nothing worked> I know it might be easier to use specific widths but I just think that there has got to be something simpler. Thanks
Check out the sample below:
http://jsfiddle.net/XV9nQ/
Try this: http://jsfiddle.net/moeishaa/W43w5/
I removed float:left and the height from the ul. Added a new css class clearfix to the ul. When you are floating things, add the clearfix class to the parent and you should be set. You dont need to specify a height
I'm making a simple website for college, which I hate, due to the designing. I'm a php programmer not a designer. (May sound stupid)
I have run into a problem, I have a centered div of 600px then inside <nav> tags I have 4 links. I would like them evenly spaced out, across the div. I have tried setting the margin-left and right but had no luck.
Take a look at it on jsfiddle
Thanks
Working demo: http://jsfiddle.net/8jK7N/1/
IE, however, doesn't support styling of the new HTML5 elements. You can use shiv to solve this issue. Working demo (with shiv): http://jsfiddle.net/8jK7N/2/
Take the <p> tag out of the <nav> bit, also margin-left 73px and margin-right 73px on each may make the links too wide for one line in your div. I know the math works out but it may be acting strangely.
If you remove the margin-right on the nav a it will work. The added spacing on the margin-right is added to the box of the anchor. Here is how the box model works: http://www.w3.org/TR/CSS2/box.html
Note in IE the html5 nav selector doesn't seem to not work correctly. I added a class on the paragraph tag and applied the fix that that tag.
This is what will work in all browsers: http://jsfiddle.net/RkUWU/2/
You can use the following:
nav a{
width:150px; display:block;float:left;
}
If you want then centered, add:
text-align:center;
I come from the world, and have been looking at resources on google about doing multiple wrappers to vertically align content -- however it seems like it's really ugly.
Is there an easier way now with HTML5? Is there some sort of implementation that uses something like the HBox/VBox mentality? I saw there are examples for non-ie browsers -- is there a compliant way?
How the heck does anyone in their right mind do HTML now? It's a mess!
//// EDIT
I've finally figured out how to vertically align an entire box over a screen, how I'm figuring out how to vertically center list items.
I've tried two methods to align this html:
<nav>
<ul>
<li>Home</li>
<li>Link #1</li>
</ul>
</nav>
one using display:inline, the other using float:left (within a container). When using inline, it seems the list items ignore the height: css, and when using float:, the links within the li do not vertically align. Do I need to place div's within the li's to get them to vertically center as well?
Why don't you try using display: box with box-align:center, this is CSS3, so not every browser supports it yet (only Chrome, FireFox, and Safari)
http://www.w3schools.com/cssref/css3_pr_box-align.asp
You can make the line-height property equal to the height of the LIs with display:inline-block for the LIs. When you do this the text will be in the middle of the line, the line being the same height of the LI, the text will be vertically in the middle.
HTML5 really doesn't have anything to do with element layout, such as vertically aligning content. As before, the markup is styled by CSS.
CSS is a totally different spec from HTML5, so no, nothing has changed.
If you're having trouble implementing a specific layout, then ask a specific question, and we can probably help out.
you can set an outer element to display:table and an inner element to display:table-cell. then, on the table-cell element, set vertical-align:middle; all its contents will be vertically centered.
It won't work on IE7 and earlier though, but hey, who cares??