I'm really struggling with a layout issue in (all versions of) IE. The site I'm working on works fine in Chrome and Firefox, but the layout of the banner is completely wrong in IE, where it appears a few hundred pixels lower than it should. I'm not sure if this is an issue with negative margins or what, and there's not much testing I can do since I'm using a Mac and only have static screenshots to go by.
I'd really appreciate any feedback on this. I've attached an image of what the IE screenshot looks like, and what it should look like. The link to the site is: http://www.osullivans-pubs.com/draft
EDIT: I'm unsure what code to include really since I can't identify the problem but I'm guessing it has something to do with this element:
#back {
overflow: hidden;
min-height: 700px;
margin-top: -235px;
padding-top: 80px;
background-position: center -44px;
text-align: center;
position: relative;
}
EDIT: I'm attaching an image of the site zoomed out, to give an idea of why negative margins are necessary. It's pretty hard to explain, but it's to do with the diagonal backgrounds and the fact that I need these backgrounds to reach about 1600px (for larger screens, and I can't repeat them, they're diagonal). I wish there were some way to get IE to recognise the negative margins, I've tried the zoom: 1, position: relative technique, but still nothing. Even in IE10.
Using negative margins is a bad idea for primary development and should only be used when there is no other solution.
Personally, I consider negative margins a hack.
Position relative will make an element respond relative to its parent, but if you've moved your element outside of its parent with negative margins you can only expect weird results.
In my experience, IE tries to 2nd guess what you want, whereas Mozilla is more wysisyg. so cross browser compatibility will always be a hinderance to you.
If you want your element to always appear in the same place [ relative to pixel position 0,0 (top left)] then use an absolute positionning on the element and specify top and left. this way you can ignore the parent element.
#back {
overflow: hidden;
min-height: 700px;
background-position: center -44px;
text-align: center;
position:absolute; top:30px; left:20px; margin:0px; padding:0px;
background-color:red;
}
This gets tricky when you want things to reposition themselves based on browser resizing; So be sure to test the absolute positioning in different situations, full screen, resized, min res, wide screen, screen rotation (if using handheld devices).
Turn off padding and margins completely, while positionning with margin:0px; padding:0px;
and change the background color to something to aide you in seeing edges of your element.
hence why ive added a reg BG on the example above.
Once the element is rougly in the right place (+/- 1 pixel) then you can tweak the margins and paddings.
Related
Side by side picture of problem:
My website is http://berathen.com
For what ever reason everything looks to work just fine in IE, Firefox, and Chrome, but not in Safari. For some reason my left and right div sections join together at the center.
#leftSide
{
position: relative;
left: -350px;
max-width: 320px;
}
#rightSide
{
position: relative;
left: 650px;
width:0px;
height:0px;
}
Any help or advice would be greatly appreciated!
I spent few minutes inspecting your site in an old version of safari.
When i tried to apply left:0 to #outerBox2 inside #leftSide, It in turn brought the right box to left side as well, which is when i noticed that your HTML is invalid - You have multiple elements with id outerBox2 (id should be unique in a document, You can use class instead to apply common stuff).
Which i think is causing the problem and fixing it might solve the issue.
Anyway, Few other things i noticed while inspecting (might or might not help you)...
The content of div#leftSide is position:fixed, hence it has a height of 0px. You might not even need it.
You've manually appled width and height equla to 0. I wonder why! (You might not need that as well then..?)
The content in middle does not have a container, or wrapper. If it has one, it's easy to apply padding or margin to both sides and absolutely position the left and right content or float them left and right respectively.
Side note: By seeing all this i was wondering how this works in modern browsers... i'd just say they're being too kind towards you... :)
This is what you can do:
#leftSide {
position: absolute;
left: 0;
max-width: 320px;
}
I don't think safari picks up negative left if position is relative.
I want to make a header like http://www.chacha.com (doesn't move, is about that wide and that height, and able to fit divs inside it and also has to be an image)
I am starting off with a blank html document and a blank css page, so there I haven't currently written any code.
I've been trying two days straight to do this now so I would really appreciate any help anyone can provide.
I have gimp so if anyone could also give me image dimensions for a perfect header and perfect background size I would appreciate it even more.
CSS:
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 10px;
background: url(yourimage.png) repeat-x;
}
<!--html -->
<div id="header"></div>
That should give you a starting place, I can't tell you more without seeing exactly what the layout's supposed to be.
The CSS property you're looking for is position: fixed which will position the element relative to the viewport. This is good breakdown of positioning: https://developer.mozilla.org/en-US/docs/CSS/position
In this specific case, what you've got is an element with styles roughly along these lines:
#header_id {
position: fixed;
width: 100%;
height: 35px;
}
You don't have to set the height, but unless there is content in the fixed element, it will collapse if there is no height specified. They also appear to have put a drop-shadow on the element toget the neat floating effect.
If you want to have an image inside, you can just put the <img> inside the header element, or use it as the background-image url in the CSS and position it with background-position (see also: https://developer.mozilla.org/en-US/docs/CSS/background-position although the compatability table at the bottom is important if you want to do anything too specific with this property).
You can do this with any block-level element (or any element with display:block set on it). In your example they are using the HTML5 <header> tag; a <div> would work, too, if <header> wasn't appropriate for your page.
I would recommend using the Firebug addon with Firefox (or similar developer consoles with other modern browsers) -- you can right click on an element on the page and select 'Inspect element' from the dropdown menu and get a breakdown of both the markup and styling to see how other websites are constructed. Very useful for when you're browsing the internet and you see something and think, 'that's a neat trick, how does it work?'
FOR FULL WIDTH FIXED HEADER
header {
width:100%;
background:green;
height:60px;
margin:-8px;
position:fixed;
}
FOR NONFULL WIDTH FIXED HEADER
Create a div and set width and height (you can also set it left or right by float:left, float:right)
then in this div put the code above but without margin:-8px; and change the width to the width that your div has.
Here is a test
I building an iPhone webb app based on iWebKit's framework. I'm currently integrating a CSS div slider to improve the navigation between pages (divs) and everything works fine except one thing.
It appears as if I'm supposed to set a fixed height value to the div containing the sliding objects. These objects will contain quite a lot of content and wary in size, hence the divs/page have to expand vertically by default. For some reason, it appears as if the browser interprets min-height as height and doesn't expand the div to display all content. I realize there's probably a small mistake somewhere, something I have forgotten to add or remove. Please help me by pointing these out for me. Thanks
Wrapper containing the slides:
#contentWrapper {
float: left;
min-height:305px;
position: relative;
margin:0px;
padding-bottom:0px;
display:block !important;
}
Class added on every sliding obj
.additional-block {
height:auto;
position: absolute;
padding-bottom:30px;
display:block !important;
}
Live demo: http://utvecklingspunkten.se/heightIssue.php
Click on "Click" to see the actual issue appearing; the text is cut off below 305 px. The issue appears in all browsers including Safari for iPhone.
It's the overflow: hidden on your "content2" div that's conflicting here. Setting that means that the container can overflow, so it does. (Removing the min-height will show you that it would be 0 pixels high otherwise.)
Removing the overflow setting will have the effect I think you want.
Today I came across a very nasty problem, I need to make the front-end layout for a website and it has a certain design element on the page that puzzled (even) me.
Now I am not exactly unfamiliar with html, css positioning, making layouts etc, so please don't make 'guesses' as to how I could solve it. I want a working example.
Here is a jsfiddle with my code and problem:
http://jsfiddle.net/sg3s/A9vzA/ http://jsfiddle.net/sg3s/A9vzA/15/
What is currently happening;
The #container has a min-height of 100% (red background) width of 970px. This is the width the page must have as a minimum. The #top (lightbrown background) div is irrelevant for the problem but part of the design.
The problem lies in #header (purple background) which currently has a width of 1022px (too wide for 1024px resolution + a scrollbar, even with a maximized window) and a negative left margin to keep it centered on the container, which is what needs to happen. When the width of the screen width falls below 1022px a horizontal scrollbar apears as the thinnest element on the page is 1022px wide. (its behaviour is the same with position absolute and a negative left offset)
What I want to have happening;
I want the 'overflow' of #header over #container to dissapear into the sides and only get a scroll bar as the viewport gets below 970px wide. (If someone can rephrase this )
Let me be a little bit clearer on this:
The 100% height layout needs to stay and be compatible with IE7+
The header needs to be centered over the container, this is the reason it is inside it in my example but be my guest to take it out if that solves the problem.
My example looks and acts correct as long as the viewport is large enough to accomedate the header.
The trick is to make it look and act the same while the sides of header overflow into the sides of the viewport when the viewport is too slim to fit that header.
Updated the example to make the change / centring a bit more obvious.
If possible I want the layout to support all the way down to IE6 though IE7+ will be fine. The final page will prompt to install Chrome Frame anyway. And ofcourse don't forget about Chrome, FF 3.5+.. (Opera?). Use of JS will not be acceptable, unless you can convince me that there is absolutely no other way, but jQuery will be present on the page.
Thank you for at least trying! (Challenge yourself! :D)
This code worked for me in FF/Chrome/Safari/Opera. Can't test in IE because I'm on Mac now, but must work in IE 7+
Example: http://jsfiddle.net/XVraD/3/
Base idea is to wrap #header in another container with "width: 100%; min-width: 970px;" and place in outside of #container, so it will do all the overflow to you.
EDIT 2: Solution that works in IE6: http://jsfiddle.net/XVraD/9/
EDIT 3: This version is fixed to have height 100% in modern browsers and old IE's: http://jsfiddle.net/XVraD/9/
It is a hard one, the only real solution I can come up with is this that you use Media queries like this:
#media all and (min-width: 970px) {
body, html {
overflow-x: hidden;
}
}
It is not supported by old browsers, there you would need a Javascript!
As far as I can tell, the best solution would be to restructure your HTML to put your header outside of the container.
<div class="outer">
<div class="header">
...
</div>
<div class="container">
...
</div>
</div>
CSS:
.outer { ... }
.header {
max-width: 1022px;
min-width: 970px;
margin: 0 auto; }
.container {
width: 970px;
margin: 0 auto; }
Demo: http://jsfiddle.net/Wexcode/tJXHF/
http://jsfiddle.net/QrVJJ/
#header is positioned outside and above (with z-index) #top. It also gets margin: 0 auto; and the background is positioned top center with min-width:970px and max-width:1022px.
#header {
margin: 0 auto;
z-index:5;
min-width: 970px;
max-width: 1022px;
height: 201px;
background: #390419;
overflow:hidden;
background: transparent url(http://4.bp.blogspot.com/_rScBRKlTdoE/TC6rNWAyD9I/AAAAAAABOTo/BWkJH9ymovo/s1600/IMG_9692.jpg) no-repeat top center;
}
How about setting the header to have a min-width of 970px and a max-width of 1022px? There are ie hacks to make min and max width work. This would make make scrollbars appear after the viewport shrinks to below 970 and as you stretch the viewport the header would grow up until 1022 after which it would stay 1022.
Having this one in Chrome.
http://jsfiddle.net/A9vzA/10/
Put an inner div inside the #header
The header has position relative and no float and with 970px
The inner div has position fixed and width 1022px and margin 0 -26px
--edit
but doesnot work in IE7
--edit
this works in IE7, too http://jsfiddle.net/A9vzA/11/ just add another inner div
The first inner div is position fixed and width 100% and text-align center
The second inner div is margin 0 auto and width 1022px
Can anyone test it in IE6
--edit
nope doesnot work if you got content in your #container. position fixed is no option
Is this what you're after:
http://jsfiddle.net/HbxTQ/8/
Fullscreen:
http://jsfiddle.net/HbxTQ/8/embedded/result/
(I've not yet made it cross-browser, only tested it in Chrome. What to ensure I have the idea right first.)
sg3s, you sound like a tough customer but I thought I'd throw my hat in the ring. None of us understands exactly what you need so please post the flattened design.
My assumption is that you need one or two layers with adjustable width behind a fixed 960px content container. Using float on adjustable width containers is going to make it nearly impossible to do what you want. Instead, use postion: absolute for a container holder (a.k.a. wrapper) and position: relative for the inner content containers. No Javascript is necessary.
My recommendation is removing #header from the primary #content container and separating the background image from the #header so they can be rendered and positioned independently.
http://jsfiddle.net/dylanvalade/ZcejP/
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.