Preface: Sorry if this question should have been posted on a sister-site. There's so many now it's hard to tell what still falls under SO's jurisdiction.
Problem: I'm having a problem with consecutive <div> elements. Sometimes there's a magic padding/margin between them and I cannot figure out why.
IE7 Magic Padding Bug http://img689.imageshack.us/img689/6239/ie7bug.png
As you can see there's a space between my container's header div and the body div. Let me explain how my DOM/CSS is set up:
HTML
<div class="Product-IconView">
<div class="PIV_TopCap"></div>
<div class="PIV_Body">
...
</div>
</div>
A simple container/child div setup, nothing fancy.
CSS
Top Cap:
.PIV_TopCap
{
margin: 0px;
padding: 0px;
height: 10px;
line-height: 1px; /* For IE so the text doesn't make the div higher */
overflow: hidden;
background-repeat: no-repeat;
background-image: url(/Images/Controls/IconView/PIV-Regular-Top.png);
}
Body:
.PIV_Body
{
height: 266px;
padding-left: 10px;
padding-right: 10px;
background-repeat: repeat-y;
background-image: url(/Images/Controls/IconView/PIV-Regular-Body.png);
}
As you can see, pretty simple CSS too, nothing overly fancy. Inside the body is another series of <div> items following the same principle as this div (container div, stacked children). That do not exhibit strange padding like this.
I've used the developer tooling in IE9 (with IE7 standards enabled) to inspect the DOM and see what might be causing this (like a margin pushing up through the top or something)
As you can see here:
Body Highlighted http://img844.imageshack.us/img844/3448/ie7bug01.png
Top Highlighted http://img192.imageshack.us/img192/46/ie7bug02.png
The bounds of the divs are intact and correct.
Conclusion This is a very strange bug, I saw it in an earlier design of mine and wasn't able to figure it out there either. It's really the only IE7 migration issue I've encountered with this project so far. To the best of my knowledge I'm following HTML Standards really close (I know IE tends not to respect them in some cases, but the plan is to do this as right as I can).
Questions for you:
What should I look for that might cause this?
Am I doing something wrong? If so, how can I fix it?
Is there a simpler / better way of going about this?
Is there something obvious I am missing?
Also
If you need clarifications or more information please feel free to leave them in the comments, I will answer them when I see them. (Posting this kinda late on a friday :o).
Found the answer so I will post it here for anyone that lands here looking for help with IE7.
The problem was the font-size of the top div. While I had line-height: 1px; set, the rendering engine still allocated 14px for the 12px font, this invisible allocation/padding/margin/whatever bleeds out through the div even with overflow: hidden or strict size constraints.
Simply making sure both these lines were in my top div (smaller than a line of text):
font-size: 1px;
line-height: 1px;
...will fix the issue.
It seems IE7 does not obey line-height very well.
Related
I am creating a short and relatively simple website for a summer project about the book Red October (located at http://dragonmath.net/summer_project_2016/summary/). The website is not complete (it is missing content, pictures, and is not yet fully responsive), but before I finish any more, I would like to fix a bug. The website appears fine in all browsers except Safari. When Safari is over 1242px wide, some of the words at the ends of the line cut off.
Originally I believed that it might be the font that was the problem, but a little bit of testing showed that the words were cut off with many fonts, all the fonts I tried. Another interesting point is that some words extend past where the cut off words are cut off. This makes me believe that it doesn't likely have to do with the width of the element, but I am not sure.
I also noticed that the website seems to be wider in Safari, The (min-width) in the #media tag was able to be smaller in Chrome, but had to be wider in Safari. I don't know if this contributes to the words being cut off only in Safari, but I thought it might help explain the problem more completely.
I found several other articles with seemingly similar problems, but none of the suggested fixes helped my problem.
This question and this article both deal with overflow, or text-overflow neither of which fixed my problem. The css in my website still has overflow: visible in it.
The website from this question is no longer at the link provided, but I would imagine that the change to the answer was adding width: 100%;. I tried that, but it didn't have any effect on the text being cut off. This MacRumors article seems to provide a similar answer to the question (changing to height: 100%; in this case). This article also mentions the fact that the text wasn't cut off in Safari (opposite of what I am finding).
I have tried Googling every possible way to put my problem that I can think of, but nothing has turned up. I have also searched Stack Overflow extensively for any reason that this could be happening. While it is hard to create a short piece of code that recreates the problem (because the problem only happens in Safari) below is all the html and css that should be causing the problem. The full code for my webpage can be found at http://dragonmath.net/summer_project_2016/summary/
.mainSection {
display: block;
height: auto;
width: 100%;
}
.sectionContentContainer {
display: inline-block;
margin-top: 40px;
margin-left: 40px;
width: 560px;
overflow: visible;
}
.sectionParagraph {
font-weight: 400px;
font-size: 20px;
width: 100%;
margin-top: 40px;
word-spacing: 10px;
}
<section class="mainSection">
<div class="sectionContentContainer">
<p class="sectionParagraph">The content goes here, but sometimes when the content stretches onto multiple lines, it cuts off random words in Safari.</p>
</div>
</section>
As far as I know, that is all the css that could impact the text. Just for background, the text has an image next to it and the image and the text are surrounded by <main> tags. The main is set to have min-height: calc(100% - 160px;
height: auto;
width: 100%;
Here are some images of what happens:
Any help would be great (and if any clarification is needed, ask in the comments).
I developed different responsive boxes for the news in the website I'm working in. And everything seems to be working fine except for the news inside the slider on the top of the main content. It displays properly in Chrome, Opera and even in Internet Explorer, but not in Firefox. The problem seems to be in the article elements, specifically in the following lines of CSS code:
.home .first-level-post {
margin: 0px;
width: 100%;
padding-top: 45.1613%;
}
It's supposed to have a height of 280px, that's why I chose 45.1613% as its value. The container's width is of 620px, and it's 45.1613% is 280px.
When I switch the padding-top property off, it takes the 93.3333% value which belongs to the article elements present outside the slider (which are 300px wide), displaying as it should, but that value does not work in the other browsers.
I've been dealing with this for a while I can't seem to find a solution.
You can properly check this issue right here.
Thanks in advance, guys :)
Firefox is interpreting your padding based on a height of 0 due to inheriting from your .home article class.
Changing your CSS to this seemed to fix the issue for me in Firefox and not have an adverse effect in Chrome:
.home .first-level-post {
height: 100%;
margin: 0;
padding-top: 45.1613%;
width: 100%;
}
Can anybody tell me why am i getting empty space on left and right of html body in this link click here. I am using mozilla firefox. I have even tried reducing width of html tag to 980px. I am getting horizontal scroll bar because of that extra space on left and right. Please help.
The first div under your header div (under <div id="header">) has this inline style
width: 100px;
margin: auto;
height: auto;
border: 0px solid rgb(51, 51, 51);
padding-right: 1160px;
padding-left: 95px;
Look at padding-right. Is that meant to be like that? Removing that gets rid of your horizontal scroll bar. It does nudge your header around a bit, but that may be your culprit. Or you could just do what Spring said, but that's not really clearing the issue as your jus hiding the overflowing elements and not stopping it from overflowing in the first place.
Its quite hard to do much more using Firebug on your site because there is so much going on (you have over 40 scripts loaded!) that the DOM keeps changing. You might wanna clean up some of those scripts and get rid of stuff you don't need, you're adding a lot of unnecessary bloat which will slow down your site, but that's a whole other subject.
you can add to body element this style
body
{
overflow-x: hidden;
}
I tried this style using fierbug and it worked for your page
I have this annoying space under my picture for no reason.
I'm using www.getskeleton.com as the framework.
HTML code
<div class="four columns bottom">
<div class="box">
<img src="images/picture.png" title="" alt="">
</div>
</div>
CSS code
.box{
border: 1px solid #bfbfbf; /* ---- Border OUTSIDE*/
}
Although I'm sure this has since been resolved, I believe none of these answers are correct (or at least, the link from the "accepted" answer is dead).
The way to deal with this spacing issue (and why it isn't set in util libraries like normalize I'm not sure) is vertical alignment of the image. This'll solve it for HTML pages when using the HTML 5 doctype. Oddly, when using e.g., HTML 4.01 doctype, images will not exhibit this errant space below behaviour.
The fix:
img {
vertical-align: top;
}
I hope that helps someone who may have run into this problem.
Edit: Some extra info I noticed after writing this and subsequently researching why normalize doesn't set alignment on the img tag; the default alignment for images is vertical-align: baseline; - that's the behaviour which introduces the space underneath. Normalize's author believes this behaviour is consistent cross-browser, and so has decided not to 'normalize' this. I suppose that makes sense if you wanted text sitting next to an image to align properly with any subsequent lines of text. Some people also prefer to use vertical-align: middle as opposed to top to address this issue - so you can vary this as you wish.
However, regarding baseline alignment, in the case where I had an image that was so big that it was higher than the line-height, I'd probably be floating it or some other behaviour anyway... but there you go.
I've used the vertical-align stuff for a while now without any incident. But as always, do ensure you test for any repercussions for images no longer being aligned to the baseline.
Try this:
.box img {
display: block;
padding: 0px;
margin: 0px;
}
Try this: .box { font-size: 0; }
Your image need to be floated. Try this:
#yourimage{
float: left;}
As mentioned, more information would help a lot but i have no doubt that it is padding that is causing the border to go out of the image, reason put very simply being
margin pushes outside the element
padding pushes inside the element
as it were.
Fix then:
.box {
padding-bottom: 0px;
}
//to be sure that the image doesn't have any padding, even though OP said the .box img fix didn't help
.box img {
margin-bottom: 0px;
}
It's an age old quirk - the whitespace from your line formatting is causing the gap. Add
<br /> after the image.
Try this
.box{
display:flex
}
I am having a CSS class with the following code. I am trying to put a DIV at a distance of 140px from the top of webpage and to put it in the middle (equal distance from left and right). It is displaying correctly in Firefox and Google Chrome but not displaying correctly in Internet Explorer 8. Can anyone tell me what is the problem with this code? Also can anyone give me some link with browser compatibility guide?
div.main
{
padding: 0px;
width: 980px;
/*height:1350px;*/
/*border: 1px solid red;*/
margin: 0 auto; /*helps in getting the DIV to be in middle i.e. equal distance from left and right*/
overflow: hidden;
margin-top:140px;
}
I find QuirksMode most helpful for browser compatibility info, plus it has some other great info.
The problem, however, depends on more than just the CSS. In order to answer your question, we'll need to see some HTML and the rest of the CSS you've got. And a description of what's incorrect with IE's rendering. Without seeing that, my first suggestion is to make sure you're using a strict DOCTYPE.
Note that centering the DIV will only center it in the containing block (probably BODY), which, wichout an explicit width, will only be as wide as the content and not the full width of the window.
margin-top:140px; is "the problem". To reach your aim use:
padding-top instead of margin-top;
if you cann't - make a wrapper div and apply padding-top to it;
or apply position: relative/absolute; top: 140px; to the div. It is suitable
sometimes.