I am struggling with the header of a website template displaying in Internet Explorer.
http://www.furnituremind.co.uk
The search field and button are not in the same place on IE8+ but are in every other browser. I have tried everything and researched issues with IE float CSS property but can not make any progress.
Do I need to specify a completely different CSS sheet for IE8 just to get it positioned properly?
My suggestion is, instead of floating the nav right, position the nav absolute. Set top and right properties to adjust where you want it to line up.
see jsfiddle
http://jsfiddle.net/kuT9K/1/
Related
I am trying to figure out what keeps throwing off the positioning of my navigation menu on a site I'm working on. I have added an image just below my menu to accentuate it, which displays perfectly in Chrome.... however the div expands and locates itself below the logo in Firefox and IE. I've tried and tried and just can't seem to figure it out. If I eliminate the image it works perfectly, but with it... not so much.
Example: http://espritduvin.ca/ (View in different browsers to witness my issue)
Give your floating containers a width, e.g. 320px for the left container, 633 for the right one.
Try giving the image float:right, at the moment it's not given any css at all.
Firefox is rendering a clear on the header-right-section. Change the style for both left (logo) and right sections (nav bar) of the header to display: inline-block.
And I would suggest using Bootstrap for CSS in the future.
try to put proper width to header-right-section, i think it will work. Right now there is only float value.
If you are using bootstrap, you can put this right and left in 2 columns.
So I'm making an auto-complete dropdown list, using javascript. It works fine in IE8+, Chrome, and Firefox, but the alignment is off in IE7.
Here's how it's supposed to look, and here's how it looks in IE7. I've uploaded the HTML here.
Any help would be greatly appreciated.
just add left: 0; to .autocomplete_completionListElement — you have an absolute positioning here and IE thinks that it still must be on a line with previous content, so you need to set left to make IE know where the div must be positioned for sure.
I've been searching about this issue for a couple of days. But as the problems are spesific, so the solutions usually are. My problem is kinda common but the solutions I found so far didn't work for me.
I use a #header div which is around 30 px height. Under that div, I have 3 divs like left, center and right. I have an accordion menu with js in the left div, content place in center, and last tweets script in the right div. Since I added box-shadow to #header div, other div's under it are placed after where shadow ends. I used z-index to make header div's shadow place on other div's, and it works perfectly in Firefox, Safari, Chrome, even IE9! But when I try in older versions of IE, it just happens the way I tell. Here is a screenshot: http://www.twitpic.com/4kh9w3
Like I just said, I have "last 2 tweets" script in the right div. It fills < ul> < li> items with tweets and shows them. So that I can design this list in my css file. And same, it only doesn't work for IE7&8. I don't even mention 6, it's not so important. The problem is that IE automatically scrolls list items to left. So half of them disappear! Here is the screenshot: http://www.twitpic.com/4khajz
So, what can I do to save my view in Firefox, Chrome etc. and also can fix it in Internet Explorer 7&8?
I'm not sure if i understand your problem... but if you cant get shadows to work try looking here http://css3please.com
I have an extremely strange problem in IE that I can't seem to track down. I have two boxes, both floated left, with a margin-left on the right box to give some spacing between the two. In Firefox (of course), it all displays correctly, but in IE when the page is first loaded, the boxes have no separation (no margin).
Here's the crazy part. If ANY CSS changes on the page at all, the box magically jumps to the correct position. And when I say any, I mean any. I modified the final font name of 3 in the font-family list of the body tag, and the box shifted to the correct position (this wasn't a change that would even modify the look of anything on the page).
I could post my HTML and CSS on the page, but it's fairly routine. I just wondered if anyone had come across or heard of this problem in the past? Incidentally, IE8 seems to render it fine.
Thanks.
Follow-Up:
So I was able to at least patch the problem by floating the box on the right to the right, and removing its margin-left property. Because my container div is just wide enough to accommodate the two boxes, this works for my situation, but it wouldn't be nearly as nice if the two boxes weren't contained so tightly in their container div.
Older versions of IE can be pretty buggy about how they handle floats. Try defining a width on your floated elements. This will help make the layout more explicit (so harder for IE to misunderstand) and trigger hasLayout if you haven't already (a weird internal IE property that causes a lot of layout bugs).
i am trying to fix a site I am helping a friend with, and in IE it is displaying the navigation bar like it is stacking on top of each other.
Is that a part of the double float bug, I tried adding display:inline, but I still have that problem.
URL: http://www.flanels.com/RadiantecHOME.html
CSS: http://www.flanels.com/style.css`
I saved a local copy and modified #top-navigation to remove float: left;.
That seemed to make the top menu render the same in Firefox and IE, I have no idea what other problems it may have created however.
One of the problems I'm seeing in both IE and Firefox is that there are white vertical bars (breaks between the images) in addition to the slanted ones which I believe are part of the images.
The other thing is that if the browser is not wide enough, the top level menu does wrap as necessary.
Doesn't look like double float to me.
From what I can see from IE dev, the <li> in IE have neither the display nor float applied, but it the style '#top-navigation ul li' is bound because the margin is being set to 0. I see that you're using the transition doctype so I'd start by changing that to strict if you can to get out of the difficult-to-predict quirksmode.
As smiller points out you don't need float and inline, so you should then remove one of them, then I suggest start simplifying the code to find what the conflict is.
Hopefully changing to strict will sort you out straight away.
you have a float left on the containing div.