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
Related
The full scope of my specific issue is likely too deep to include in a question here. Instead I am looking for clues.
The nature of the problem has to do with overflow: hidden. In Internet Explorer 11 it is working sometimes and at other times not. I have an element that is larger than the body and I have set the body element to overflow: hidden. Sometimes the page loads and works exactly as expected, but in about 60% of my tests the browser just ignores this property. If I look in the inspector the property and value are present, yet are not having any affect on the rendering of the page.
I have tried using a container element instead of the body, but the same thing happens. opening the inspector panel while scrolled to the top of the page will sometimes fix the issue. Any ideas?
There is a lot going on with this layout which is why there is no fiddle. Everything else works fine in IE. There are no errors in any browser and the layout works perfectly in all other browsers I have tested (Chrome, Safari, Firefox, Opera and IE 11).
Are you using a display properly on that div or element? If you have display: inline then try to change to display:block.
I am not sure why this worked but I just positioned the body fixed. That seems to work.
I'm building a website and testing it on Chrome mostly, intermittently checking if it still works on Firefox.
I figured that, since both Chrome and Safari run on WebKit, they would render the website identically. This is not the case though.
I was checking the site on Safari and I noticed that my menu bar, which uses an unordered list with column-count (both -moz- and -webkit- with the same value), and noticed that there is a difference between the filling of the columns.
Chrome seems to fill the columns evenly while Safari just fills the columns one by one. The images below illustrate this.
Chrome renders:
Safari renders:
I very much like the Chrome way of rendering the columns, so I was wondering if there is a way to force Safari to render the site this way, possibly without altering the html layout at all.
notes: Firefox renders the same as Chrome and needs no fixing. I'm not developing for IE, so I don't know how that renders.
I had the same issue but min-height didn't work. I had the column-count set on a Bootstrap .col-md-12 container and this was the issue for me.
I added a child div with the class required and it worked perfectly
add a min-height to <ul> seems to fix the issue
nav ul { ... min-height:50px; } /* < add */
tested on Safari 5.1.7 (7534.57.2) for PC
bug is referenced here too: http://css-tricks.com/forums/discussion/12904/safari-5-1-multi-column-bug-extra-columns-appear-/p1
I had a similar problem with the columns content showing up on Safari with a height of 1px. I added "min-height: 100%" to the element and all looks good. I also have "height: 100%" on the body/html and containing elements, assuming this is how I got it to work properly.
I've got a development site (http://www.tentenstudios.com/clients/swls/our-surgeon) that works well in FF, Chrome, and IE8+ but the right-corner image breaks in IE7 and I can't seem to figure out what's causing the problem. The right-corner image is in a left-floated container DIV but there is also an absolutely-positioned graphic on top of it, not sure if that's got something to do with it or not.
Thanks for any help anyone can provide!
Per request, here is a JSFiddle with (I think) the relevant code: http://jsfiddle.net/HyVcG/
Also, to see this work you can open the link with IE and hit F12 to bring up the development console, then click Browser Mode: IE9 and change it to IE7.
The widths and interior margin for .eightcol and .fourcol add up to more than 100%. Some browsers may round decimal values differently than others.
65.4546% + 3.63636% + 30.9091% = 100.00006%
Here's a jsfiddle demo where you can see that the right column breaks in IE6/7 but is fine in all other browsers.
It's possible that this CSS grid wasn't built to support IE6/7. If all else fails, you could edit or override some of the widths or margin values in the CSS grid. But the changes would have to be reapplied everytime the CSS grid is upgraded. Not sure if there's an easier solution.
Edit: For comparison purposes, here's a version of the jsfiddle demo with integer percents that add up to exactly 100%.
I'm having an issue with my navigation, the first list item appears to have a huge gap on the right.
I have a list of links inside an UL each have their own class so I could set a background icon to them. The first link has a background to give it the rounded effect.
I used relative to push to left so it would have that rounded effect for the hover and active states on the homepage and hover for when i'm on other pages.
Now it all works fine in new browsers apart from IE7 and probably older versions.
I've put it on JSFiddle to make it easier to view.
http://jsfiddle.net/datastream/Gta3h/2/
and http://eminemforum.net/navtest/nav2.html
Thanks
Live Demo (edit)
I got rid of <div id="navHold">.
I removed right: 40px from #topNav2 .home-icon.
I changed the width of #Navigation-Holder from 750px to 830px to make it appear the same width it was before I changed anything.
I've tested that this looks consistent in: IE7, IE8, Firefox, Chrome.
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.