I was having a small problem with center aligning a DIV in IE7 and 8. There are some minor height issues also, but ill cross that bridge when I get to it...
I have always used
middleAlign {
width:someAbsWidth;
margin-right:auto;
margin-left:auto;
position:relative;
}
to center my DIVS in all browsers, and it has worked fine. But now, I am having problems with this method in IE7 and 8. They do not center the div; rather it acts as if the margin-left is 0. Could it be other CSS rules affecting the margin display in IE?
I have uploaded the page to my server; the page is viewable here: http://drafts.thatcompdude.com/NewSite/
The page renders just fine in FF 3.6; Chrome 8.0.
Thank you;
--Dylan
Your page is in quirks mode because of the comment at the top. Remove it and it'll be standards mode and it'll start working.
Related
I've got a client's responsive site which is used for mobile purposes only. It works great on every phone except for Iphone 6. Home page loads fine but every inner page gets a weird overflow with a big border at the left side of the screen ().
Tried to add special breaking points just for Iphone 6 from this thread.
Tried to add an outer container to the main container with width:100%;.
Tried to add overflow:hidden; to the body and to the inner container.
Tried to add overflow-x: hidden;.
Nothing worked.
Tried to add position:fixed; to the body just to see of it will work. The overflow of the screen was gone but the site was of course not scroll-able.
I don't have a mac to debug this issue with developer tools and that limits my options.
On all mobile emulators, Chrome, FF, IE, the site looks o.k. On Browserstack I could see the bug but couldn't debug it there.
It's not a single phone issue, tested on several Iphone 6 devices.
Any other ideas please?
Site link.
Solved!!!
Had an issue with the some uls in the page. Added overflow:hidden; and it solve the problem.
Obviously for Chrome, Firefox, and Safari (which use CSS 3) you would do
margin-left:auto;
margin-right:auto;
But how can I perfectly center in IE8?
This code already works in IE8, IE7 and IE6, and people have been using them to center things for a good long while now. Have you tried your code before assuming that the margin properties are new to CSS3 (when in actual fact they have been around since CSS1) or that just because something is part of CSS3 automatically means IE8 and older won't recognize it?
If that code doesn't work for you in IE, your page is probably being displayed in quirks mode.
I have a couple dropdown menus that are giving me issues in IE7. I've wasted the entire morning trying to fix it. The client is monitoring the site using IE7 so it's a top priority.
I've got a live demo and a jsfiddle demo set up. Here is the actual site I'm working on today as well just for reference, but the demos have the problems isolated. I left some of the reset css and such in case any of it is related.
There are 2 problems:
Most Important: There are z-index issues with the top menu and the header content in IE7. The headings are above the dropdown.
Less Important: There is a small gap in the top menu between the first link and the dropdown that sometimes causes the dropdown to disappear when moving the mouse to it from the top link. This occurs in at least Firefox 4 and IE 7. This issue doesn't occur in the bottom menu.
I removed javascript, tried removing any clearfix css, whittled down the css and html, switched from html5 to xhtml1 strict, played with the position and z-index properties, and read several articles here and elsewhere about z-index bugs in IE but I still can't get this one to budge.
I don't care about IE6 support or if I have to use javascript, I just need to get it working in IE7 for the client. Any help is greatly appreciated.
To #header and #nav add:
position:relative;
and
z-index:10 //for #nav
z-index:0 //for #header
I can't figure out how to get the height of my middle-container div to expand to fit the data inside. I'm getting lost in suggestions like height:100%, etc. Anyone figure out what css I need to add to fix the following:
http://www.tippycanoetoo.com/pillows-rugs-throws.html
http://www.tippycanoetoo.com/emma-20-5-square-throw-pillow-1.html
(It appears fine in Firefox & IE7, but not Chrome, Safari, & IE8 - it temporarily is fine in IE8 b/c I set the compatibility mode to IE7 in the head.)
Add overflow:hidden; to .middle-container or .middle
See clearing floats for an explanation
I have a calendar that is a table. For some reason, IE is adding a vertical scrollbar to the edge of the page but there is no scroller (and nothing to scroll) FF and Safari look fine.
Any idea?
This is normal in Internet Explorer, and to my knowledge can not be turned off except maybe with a overflow:hidden on the body or html element, with the obvious downside that the page then can't be scrolled at all.
If you need to get the exact same behaviour in all browsers, and want to add the deactivated scrollbar to FF and Safari, check my recent question.
If you put overflow: auto in the body element and just remove overflow:auto or any other overflow setting in the other elements on the page, then the main browser scrollbar will allow scrolling down the page and the page will expand, moving the footer down as well.