I could do with a bit of help on this one.
This page; http://fredericacards.co.uk/greetings-cards.php
has a bunch of divs for products with an h3 heading. That h3 has a 20px top margin in Safari and a 20px top and bottom margin in Firefox that doesn't appear to originate from anywhere I can find.
It's an old-ish site so I haven't used a boilerplate reset but I've done the usual margin and padding 0 for *
I have debugged to the extent of reducing the page to just one offending div with Firebug but nothing I do, other than setting the top-margin to -20px, will shift that heading up.
What am I missing here?
I don't normally have a problem with spacing content so I guess there's something I'm carrying around that maybe a 2nd pair of eyes can spot.
You have some kind of funky characters in your product div - what code editor are you using? Look at the source HMTL:
Related
When I try to "float" my navigation, it gets bumped down, sometimes a few pixels, sometimes a lot. If I make the parent display:inline; it will remove the bump, but the structure is all messed up. If I remove the float from the nav it is not bumped down, but again, the structure is not what I need. I tried position:absolute; and position:relative; for both the nav and the parent and it doesn't help. I tried placing a clear:both; all over the place to no avail.
(I tried searching here and the google, but I don't know enough about what I am doing wrong to find an answer)
Here is a screenshot of 2 sites I have this problem with. The first one has that yellow gap above it that I don't want, the second has a few pixels of black above the dark gray, kind of hard to see. (If I remove the floats the gaps go away, but the structure of the menu fails)
The problem comes from using display:inline-block; where the browser automatically inserts a margin on the bottom of the element to allow for letter descenders. You can change your display to :block; if it will not break your layout. If not, you can add a negative margin to the bottom.
There are a few options here, that worked, depending on the layout I was using. Here are some that worked:
margin-bottom:-3px; or margin-bottom:-4px;
margin-bottom:-0.15em; worked too.
When the browser gets stretched from its width, the header doesn't move, but the content of the page does. It's driving me nuts. If you stretch it far enough, the banner eventually ends. IE: it doesnt repeat further the banner.
Any advice? I'm not sure which part of the source code would control this. I'll put the CSS up and if needed, I can throw up part of my HTML.
Image Examples
Web
Without seeing your markup (which would be helpful to share), it looks like line 9 is your problem:
header#mast{margin:0 0 0 0px;width:1200px;position:fixed;top:0px;left:0%;z-index:100;}
Update it to:
header#mast{margin:0 0 0 -600px;width:1200px;position:fixed;top:0px;left:50%;z-index:100;}
(Note the left:50% and -600px left margin (half the width of the element).
If you wrap your #mast and #primary-nav' elements in adivthat has a style ofmargin: 0px auto` this should cause everything to continue to center with the rest of the page as your expand the window.
As far as the banner ending is concerned, add the style width: 100% to the element that is responsible for it for the resulting infinite expansion as you widen the window.
EDIT
Since you've added the website, put the contents of the header in the following tag:
<div class="container container-twelve">...</div>
This will center your image, text, and links.
It was a large combination of difference changes that were answers. Basically it came down to a number of width changes.
If I set width 100% in one place, it had to go in multiple ones because the entire mast div was nested divs. Also, to get the banner to expand further to right, it had to be 200% for width.
The proper code is reflected in the website, at least for my solution.
Thank you everyone, and specifically TMan.
I am trying to use a background that surround the content area (just a bit of shading on both sides) as seen here: http://i.imgur.com/5X5D7.jpg
I left room in the middle for the fixed width layout which is 980px.
My body css is just this:
body {
margin: 0;
padding: 0;
background: url(../images/bg.jpg) center repeat-y;
}
It looks good on the homepage that has no content on it. But when I go to a test page that has a few paragraphs typed out and the scroll bars appear in my browser, there is a slight white line that appears to divide the background and the content area.
I tried shifting the background image shading by a pixel but then it does not work on the homepage..
Is there something else I can be doing in the css to prevent this?
I should say I am trying this in drupal with the zen theme and have not really changed anything else.
Made a jsfiddle for you: http://jsfiddle.net/Ja2SR/
Essentially I think you're looking at the browser trying to divine 1px in two, which it can never do. I don't really understand why it is an issue, though - the line appears inside the content area, which in the fiddle you can see as white next to red, but if your content area is white also, and has padding on both sides, which I assume it does... then having 1 more pixel shouldn't be too bad. Correct me if I'm assuming wrongly!
I'm currently using the Blueprint CSS framework setting my width to 910px along with the sticky footer markup by Steve Hatcher.
The problem I'm getting is that for some reason in only Internet Explorer 6 is that an extra padding/margin of 10px is being added on the right hand side of my #wrap class.
I have uploaded my test site here:
http://www.prashantraju.com/test
Here is a comparison of IE6 vs IE7.
comaparison http://www.prashantraju.com/test/ie6ie7.gif
As you can see there is no margin/padding on the right hand side (the red area) with IE7 but in IE6 there is an extra 10px.
Is there a way to fix this - or what the cause of the extra 10px is?
Thanks in advance.
From what I can get with FireBug, there is no explicitly width set to the navigation bar, what if you give it a fixed size(same as 910px)?
Edited:
Sorry, given the FireBug css output, I suspect that you are using a inherited element from screen.css from line 101: margin-right:10px;
I reckon that is the cause.
Now that the navigation bar has it own css entry in the stylesheet, maybe you can reassign the margin-right element valut back to zero to resolve this problem.
I am almost done with my project, but have one final looming problem that I'd like some advice on. Info on the CSS "margin transference bug" relating to ie6 and ie7 can be found here and here.
So I have all of these heading tags with margin-bottom: 24px. They sit above any number of left-floated divs, depending on the page.
Each of the floated divs sitting below the heading tags "inherit" the heading tags' margin of 24px.
Short of putting EVERY SINGLE heading tag in it's own div, I am out of ideas. Do you have any ideas?
EDIT:
Maybe a BETTER question is, "how would you add space below all heading tags without using margin?" Line-height isn't quite cutting it, but what about padding-bottom?
If you're not using background images or background colors behind your headings, I don't see any problem with using padding-bottom.