Ok, I hope this isn't a simple oversight but I have been working on this for hours!
I have a fairly complex HTML / CSS structure on a page I'm working with. I have text at the very bottom of the page that is in a div with a bottom margin of 10px;. That div is in another div with a bottom margin of 10px;.That div is in other divs on up the chain until <body>.
For some reason the text butts right up against the bottom of the div it is inside. I have created a minimalist repro for people to look at. It does reproduce the problem, I just hope I haven't removed any other issues that are contributory to the issue.
I did get it working in the latest chrome at one point with a height: 100%; somewhere in there (I don't remember where now) but it didn't fix the problem in firefox and ie. Both of those browsers had bizarre behavior with that css, they initially displayed with the correct bottom margin size but instantly jumped back down so that the text had no bottom margin again. It was like a little blip.
Oh, also in my repro html ie isn't displaying anything centered (at least ie9). I'm hoping that won't be a problem. I can certainly fix that issue easily enough myself.
In chrome, if you inspect element it highlights the text div in blue and the blue bounding box shows that the div extends beyond where it is currently being displayed.
Here is the minimalist example: http://www.del337ed.com/repro.html
I appreciate everyone's input / help.
Add overflow: hidden to #SubmissionDetails to fix the margin problem by preventing the behaviour of collapsing margins on that div.
Add a doctype as the very first line to escape Quirks Mode and fix your page in Internet Explorer:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(You could also use the much shorter <!DOCTYPE html>, I just stuck with what you had)
Making this change will also improve things in other browsers (that is, it will improve the consistency).
In your example, the div which contains the markup for the thoughts - which currently has no class assiciated with it add the following:
height: auto; overflow: hidden;
Use padding instead. The margin is there, it's just that margin does not fill in the background (which is why it looks like there is no separation.) It's there, it's just not visible.
element.style {
padding-bottom: 10px; /* change the margin property to padding */
font-size: .9em;
font-style: italic;
}
Related
I had the same issue at the bottom, but this resolved it White gap at the bottom of web page
I tried doing the same thing for the right but nothing happens.
It seems to only happen at a certain window width.
The Problem is width of your form element(width: 48.821174201%;).
Solutions:
#plans .affiliateSection form
{
background-color: red;
/* Add width:auto;*/
width: auto;
}
OR
#plans .affiliateSection
{
overflow:hidden;
}
Jsfiddle
There is a fair amount of bad HTML markup on this page. I would start by fixing the mismatched tags. View source in FireFox and you'll see that it will light up all of the errors in red text. You can hover over the errors and see what the problem is.
After you've fixed the HTML markup. You can look into what is causing the white gap to the right of your page. It is due to several elements on the page that are too wide, or have too much margin to the right of them. Use your browsers inspector to find and fix these elements one at a time.
I have a webpage in which I want to set height of head to 60px, but somehow its inner elements overflow and thus it doesn't show right. I'm suspecting that the logo's background is somehow setting the height to be bigger than it should be. I'm specifically setting background-size: 202px 56px; and height:56px;. The original height of background image is 250x69px and it should be resized to (auto calculated)x56px (or fixed 202x56px would be ok too).
If this would be displaying right, there should be a small 'border' on the bottom which turns blue when its corresponding top element is hovered.
The styles are originally written in SCSS with help of Compass and compiled to CSS. I've also used Compass to generate sprites. I've only provided CSS files on webpage. I'm not putting any code here because it's too large (200+ lines in each file). If I have to show SCSS files, please let me know.
The webpage I'm editing can be found on this address: http://stogrebro.com/page-test/
I'm originally creating this webpage on localhost so there might be some broken links. If there is anything important missing, please let me know.
i made some tries with your page and found out that the "over-height" of your <td> elements is due to the padding for anchor elements inside <td>. You have first to put it to 0 and then to apply the other paddings for left and right you are using:
#head table td a{ padding: 0px; }
Moreover you can just set the height directly to the <div id="head"> and set it with hidden overflow (which also makes the trick but lets <td> with wrong height).
#head{ height: 60px; overflow: hidden}
The background-size works fine and doesn't make any mistake.
Hope it helps you.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Text input with z-index inaccessible by click in IE
If you follow this link you can see that i am trying to show a text-box inside a div on top of image which is draggable.
http://jsfiddle.net/N87CX/27/
I have 2 issues
In IE 8 I am not able to click inside
text-box.
Also some problem with size
of text-box when the div is re-sized
it does go out of the parent div.
Can I restructre this peoperly so it solves both these issues ?
Thanks.
This is quite an interesting problem.
The first part about IE8 appears to me to be an issue with the transparent background within the text area. If you apply a colour to the background then you are able to access the text area as expected. To make this a little more intriguing - when you add default text, you can access the text area only where this text already exists.
So I would recommend investigating how IE 7 and IE 8 handles / creates transparent backgrounds. And maybe question whether it really needs to be transparent (if you want the easy way out).
The second issue that you mention about the div extending over the parent div can be fixed by adding overflow: hidden to the parent div - which in this case, you should add it to the #dragDiv item within your css. This is often the case when using floating elements within a div - you should read more about floating elements and clearing them ( clear: both ) as they are the cause of so many problems if not handled correctly.
I hope that helped a little and I would be interested to know if you find the cause of the first issue!
IE has a bug with transparent backgrounds on inputs and textareas, to get around the best thing to do is use a transparent.gif for the background
then next I found that IE will not accept a 100% (or any percent) height on the textarea, even if the parent div has an explicit height, but if you set the height on the textarea all appears to be well
Example : HERE
I found it better to make the height at least twice the line height or the scroll looked untidy (slightly out of the box), and also I removed the positioning from the inDragDiv to let it default under header .. there is still a 1px difference in IE7 and below which I've corrected using a negative margin.. in IE7 the positioning was taking it, the textarea) way over to the tight.. if you still want to use absolute positioning you shouljd explicitly declare the left: 0; property
Had the similar issue -> IE8 textbox was not editable (when wrapper of my App has position:absolute). Click worked only in the border. Filled with color and transparent also did not work. With this doctype change the issue is fixed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Source: http://www.codingforums.com/showthread.php?p=1173375#post1173375
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.
I have a site built in Dreamweaver using HTML and CSS.
The layout is exactly how I want it in all browsers (Chrome, Firefox, Safari) except for Internet Explorer 7 where the layout of the bottom row of images or image is totally messed up - either too high or too much to the right. I have no idea why this is happening, I am a beginner and have tried all I can think of, if anyone can help that would be much appreciated.
The site is here: http://www.mediadarling.co.uk/clients/lenistudios/
Thanks in advance!
There’s a couple of bits in your CSS that I don’t quite understand:
#movers-row {
...
margin: -120px 0 0 120px;
Why the negative top margin? This seems to be what’s pulling the images up too far in IE 7. I don’t really understand why it’s not in other browsers; something to do with the floats involved I guess.
#footer {
...
margin-top: -130px;
Is this related to the other negative top margin?
Anyhoo, I think you can fix your issue in IE 7 by:
Removing those two negative top margins
Adding margin-top: 10px; to #imagerow just in IE 7 (and possibly IE 6) (the padding top doesn’t work with the floats for some mysterious IE reason)
See here for example code: http://www.pauldwaite.co.uk/test-pages/5220698/
You’ve also got a couple of validation errors in your HTML. I don’t think they’re causing your issue, but I fixed them first, because when you’re trying to track down an IE bug you really don’t want validation errors in there. Here’s the validation of the page.
After: <div id="rotxt">Roll over images to see larger versions</div>
Place: <p class="clear"><br /></p>
The .clear contains the CSS: clear: both;
you can use conditional statements for IE, here's an example:
<!--[if IE 7]><link href="css/layoutIE7.css" rel="stylesheet" type="text/css" /><![endif]-->
This is placed at the <head> and assumes that you have an extra css file with the IE corrections.
P.S. you need to add your IE specific CSS rules into the IE CSS file, that way it will work in IE and most browsers...
In my example, I used the "if IE 7", means if it is IE version 7, but you could use combinations and other versions.
EDIT: surround the Dear guest, text, image and the div #rotxt with another div and make sure it actually surrounds it with a simple rule:
.surround {height: auto; overflow: hidden;}
this is cross-browser, no need for the conditional CSS.
EDIT 2:
Ok, the problem here is in several places...
You're floating the image to the right, ok
I suggest surrounding the title + text + caption with a div with a float left.
Then surround both the image's div and the new div with an aditional div. This one with a height: auto and overflow: hidden.
Then remove the float of the images main div, and remove the top margin;
Finally, it would be best to add the orange rectangle as an element that comes after the images block (this way it's guaranteed that the social div comes in the right place).
So, my suggestion is something like this (sorry for not real tags):
[new surrounding div]
[main image div]
image
[/main image div]
[surrounding div]
title
text
caption
[/surrounding div]
[/new surrounding div]
[images div]
images
[/images div]
[sepatator div] (optional)
[/sepatator div]
[social div]
[/social div]