I have read all the SO questions I can find already and have been at this for 4 days now (sadly). Please do not think that I am trying to shortcut some work by posting it here. I would be happy to read about a solution and apply it myself but chances are I've already tried it...
Please view this page in IE8
As you can see, the left side menu drops below the page content. This is the only page on the site that does this. I thought it was something in the CSS that I added specific to that page, but in removing the custom CSS entirely, not only did the page look like crap, but it didn't fix the left side menu.
If anyone could advise me on how to get the left menu actually on the left side, I would be very appreciative.
UPDATE (incredibly embarrassing)
I had a div in the right side of page that didn't have a closing tag. It caused the left menu to be a child of the right content which explained the display behavior.
I sincerely apologize for wasting the time of those who have read this question and especially those who took their time to view the page and offer advice.
it seems that float: right isn't set on your right div
also right div has left margins, which prevents left div to be where it is supposed to be
#content {
float: right !important;
margin-left: 0 !important;
}
I don't have IE8 but have you tried adding
display: inline;
or
display: inline-block;
to #primary and #secondary?
Let me know if this doesn't work, I'll have access to a computer with IE8 later today.
Related
For a school assignment I was required to redesign a website for a buisness.
I had only ever mucked around with css/html before and this is the first time I had written it for a full website.
The issue I am facing is the positioning of 3 divs is correct in google chrome, but in IE and firefox the divs are incorrectly positioned.
http://letsmine.info/mnpctech/index.html they are the twitter, facebook and checkout symbols on the right of the menu bar.
As this is the first time I have written CSS and HTML I presume this is a silly mistake and I am hoping that you can guide me into the right direction.
Also on the store page I need to layout the products with a picture and name like they are here http://www.mnpctech.com/MnpctechBilletFanGrill.html . Should I create a table and just put the images and title in there? just looking for some advice.
You need to add the following properties to #checkout, #facebook and #twitter:
display: inline-block;
float: right;
and remove the following properties from each one:
position: relative;
left: 980px;
top: -49px;
The page should then display properly in all browsers.
Make sure that you use floats and know your way around the "display" property well for positioning, I always try to stay away from relative positioning as it's a bit unreliable.
The picture shows the problem area I have with my website. That little black line protrudes out from behind my dropdown menu and in Firefox the word resources will appear underneath home, but it IE and Chrome the menu looks as it should, except for that little black line that sticks out. The template I'm using is a modified Dreamweaver template. It didn't used to do this, but I breaked it :/
edit: all fixed.
You need to clear your floats.
If you add overflow: hidden to your top menu UL and the sidebar div, you will notice the HR moves down.
Edit
Just an FYI, there is probably a better way to clear your floats then just adding overflow: hidden everywhere like I showed in this answer. It really depends on how you are laying out the page, and I don't know what your plans are. Therefore, here are some links below that explain what floats are, how they work, and how to clear them, which should give you a better understanding.
http://www.quirksmode.org/css/clearing.html
http://css-tricks.com/all-about-floats/
Here (on Chrome 10) the footer seems to be aligning with the side bar (too far to the right) instead of center like it's supposed to be.
I didn't edit the footer's CSS. I was editing the sidebar and the index when this happened, but it's so far down the page that I didn't notice 'til later, so I have no idea what the problem is.
Any suggestions welcome! Thank you :)
Tara
UPDATE: I've checked all the DIVs are correctly closing. Some were missing in the side bar, and that's fixed the problem on the front page but not on sub pages or articles. Now there is a black line appearing at the top (under the menu) that appears to be the #footer!!. I can't understand why it's there.
you wrapper #casing contains floated elements, which are not cleared for following elements.
#casing { overflow: hidden; }
This should fix it for modern browsers. I recommend this article for better understanding and other clearing solutions.
You need to clear your floated elements by adding clear: left; to your #footer css.
I'm sure this is something simple but I am just not seeing it.
My wrapper DIV is floating left and the A tags within are displaying correctly but mousing over them you'll see that they are not the proper height/width.
I can't seem to get them in line, could someone take a quick look and tell me what I am missing?
Page is here, it's the social media icons
Any help is greatly appreciated, again I am sure it's something simple.
--Edit--
I am on a Mac, tested with firefox and safari so far, they don't hover correctly, only the very bottom portion of them actually function as a button.
In firebug, if I remove the wrappers float attribute, the links hover as they should. So I know it has something to do with the float.
On Chrome the icons are in a line but, as you said, only the bottom portion of them is active. The problem is that your #branding element extends down below the bottom of #main, partially obscuring #subWrapper, #sub, #left, and part of #right (though not enough to cause a problem there).
You could put overflow: hidden on #main, but then the graphic in #branding would get cut off at the bottom. (The graphics look very nice, BTW.) I think if you just add a positive z-index to either #sub or #subWrapper, such as z-index: 1, that should do the trick.
The problem is a footer on a web page that seem to not follow the correct flow like it does in FireFox. The problem feels like it is an Internet Explorer related bug, because the layout will "magically" snap into place when i move the mouse over the link "Legg til i handlelisten". On pages where the "description" part of the page is longer then the left column, the footer displays correctly. From what I can gather the bug is only active in IE8 when its running in "IE8 Compatibility Mode" or "IE7 mode". I am not able to recreate the bug when running IE6.
I was wondering if anyone is able to find a solution to this bug, maybe some CSS property I can set or a tag that needs modification.
These two images show the error and what its supposed to look like:
http://tinyurl.com/layout-error
http://tinyurl.com/layout-fixed
The page referred to is here: http://tinyurl.com/yb9h34d
Edit: Clear: both; doesnt seem to do anything to solve the problem.
Yes... it looks like a float-caused problem.
Try adding this line into your HTML, just before the footer:
<div style="clear: both;"></div>
I think it is expecting an item that clears the floats.
Try floating the div.container or remove it, as it is useless and a mild case of divitis.
In older browsers, the float property in CSS removes the height from the element. Therefore an element which is floated to the left or right which would normally have a height of say 100px would now have a height of 0px and whatever content is below it would move up to fill that space where the content is supposed to be. Most browsers have fixed that error by now, but it still reappears in even the modern browsers. There is a very simple fix that you can add to your footer container in the CSS:
clear: both;
This will cause the element to clear any boxes that may be floating around and start fresh on its own line, or should anyways. It never hurts to try.
Read more about the clear property: http://www.w3schools.com/Css/pr_class_clear.asp
What happens exactly is that the left column gets shorter by a line when you hover the first link in the leggtilihandleliste div, and it gets longer by a line again when you hover the second link. It's only the left column div that is affected, not the link, the list containing the links or the div containing the list.
I don't know exactly why this is happening, but if you specify a height for the div containing the links, it stops happening (eventhough it's not that div that changes size).
Why does DIV#footer have display:none on it?
Anyway, if you float: left on .footerWithRightAndLeft you should be ok.
You can inspect things in IE if you hit F12, in case you didnt know. It's not as good as firebug, but it's something.