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.
Related
I can scroll left and right on this page even though there is no elements on the right can anyone please tell me why this is how to stop it and if this even happens for you? My browser size is 1920x1017px.
http://cannonmc.net/
Thanks, Luke.
Your values div is stretching. Add a float property to it
#values {
float: left;
left: 42.5%;
position: relative;
top: 75px;
}
The float will deal with the page breaking out. I do suggest working on the layout though. Centering content can be accomplished with better techniques that can be found here: http://www.w3.org/Style/Examples/007/center.en.html
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.
I'm trying to move the image for Trip Advisor on this page (at the bottom right). As seen in this screenshot, it needs to move up and to the right to fit in the orange/pink box.
When I apply negative margin, the image gets hidden behind the orange/pink box. I've tried adding various z-index values to make it appear on-top, however nothing seems to work.
Any idea what I'm doing wrong?
Note: This image (for Trip Advisor) is reused on the home page as well. Any CSS styling applied should not affect the positioning of the image on the home page.
No problem! Hope this helps.
.TA_rated {
width: 155px;
height: 77px;
position: absolute;
left: 265px;
top: -6px;
margin: 0;
}
Edit: only tested in Safari, but should be OK elsewhere...
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.
I'm trying to add a content rotator to a site I'm building. The rotator works fine. In fact, it works out better than I had hoped. I need to tweak some styling things, but that's besides the point.
For some reason, the rotator (which is relatively positioned and inside my container/wrapper div) pulls my wrapper and menu down with it when I add a margin to the top of it (margin:65px auto 0; or something like that). Any words of advice?
Page here:
http://technoheads.org/test/ice/index.htm
This sounds like a classic case of collapsing margins.
You can fix this by giving the container a border-top, margin-top, padding-top, or an overflow other than visible. (jsFiddle)
you can probably accomplish what you want by giving #wrapper top padding instead giving #slideshow top margin.
I run into this problem a lot when I put elements inside of inline elements. You should be able to fix it by doing one of the following:
Set the element you're having trouble with to display: block; (Usually a good enough fix)
Use top-padding like already suggested (nothing wrong with using band-aids if it works...)
Set the element to float: left; (Not really recommended, can cause some problems down the line, but will definitely allow you to add top and bottom margins)
How about this?
#menu {
position: relative;
width: auto;
height: 100px;
left: 383px;
top: 0px;
}