I'm having a problem with a centered div only on IE7... on Chrome and Firefox it works properly.
Here is the website, it's on Volusion.com so go easy on me it's an old platform :)
http://www.ecosandbags.com
Everything is in a main div:
<div id="MainDiv">
Here is the CSS
#MainDiv {
background-color:White;
border:1px solid black;
margin:0 auto;
width:960px;
}
Anyways check it out with FireBug in Firefox if you need to see more details but that should be it...
So, bottom line, the div is centered on Chrome and Firefox but all the way to the right on IE7... I'm not sure what to do this CSS (specifically the "margin: 0 auto;" usually works for me)
Thank you very much for your time.
You're in Quirks Mode. Add a Standards Mode DOCTYPE if you want auto margins (or anything much) to work in IE.
You are missing doctype.
Add this as a very first line of your html document and it will solve the problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Funny, I was asked to help with exactly same issue in the office yesterday.
I've had this issue before - this has always been a reliable solution for me;
body{
text-align:center;
}
#MainDiv {
text-align:left;
margin:0 auto;
background-color:White;
border:1px solid black;
width:960px;
}
Related
My problem looks similar to the question I have found here:
chrome vs FF/IE/Opera in calculating table cell width ? (table-layout:fixed)
I simplified the page. The page contains a table, that looks the same in all browsers, but Chrome. I beleive the problem is padding (don't know how to fix it) or doctype (I don't know too much about doctype)... Please help me make Chrome view the same as in any other browser. Thank you.
Below is my html-page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<title>Looks different in Chrome vs FF, IE, Opera</title>
<style>
table.maintable {
background-color:yellow;
border: 1px solid red;
border-spacing:0;
border-collapse:collapse;
table-layout:fixed;
word-wrap:break-word;
}
table.maintable th, table.maintable td {
border: 1px solid red;
margin:0;
padding:14px;
}
</style>
</head>
<body>
I want the date look like 05/10/2011, in 1 string. Chrome cuts the date into 2 parts. All other browsers are OK. The problem is style <u>padding:14px;</u>, but we need some padding in cells. <br>
Also <b>table-layout:fixed;</b> and <b>word-wrap:break-word;</b> are needed because any long text without any spaces will not destroy the table size in this case. How to make Chrome look like any other browser?
<table class="maintable" style="width:510px;"><tbody>
<tr><th style="width:57px;">number number</th><th style="width:75px;">date</th><th>current info</th><th style="width:90px;">more</th></tr>
<tr><td>40</td>
<td>05/10/2011</td>
<td>2 lines in Crhome but 3 lines in other browsers. Also check the date.</td>
<td>more...</td>
</tr>
</tbody>
</table>
</body></html>
If you believe my first string (doctype declaration) is wrong, please show me a proper one. The web-site in one of Cyrillic languages. No xml is used.
Thank you.
I wonder if the padding is causing the date to wrap due to available space.
You could try to put a span tag around the dates with a .no-wrap class and give the class the property white-space: nowrap to prevent dates from wrapping.
.no-wrap {
white-space: nowrap;
}
...
<td>
<span class="no-wrap">01/11/2014</span>
</td>
...
i' m making a website that have to work with all browsers.
I' ve tested IE, FF, Opera, Chrome and solved a lot of thing related to CSS and jQuery compatibility... but the last thing is making me crazy :(
Safari doesn' t work as it should on the vertical div scrollbar. It is blocked at the bottom of div at the first access. Zooming in/out the page is the only way to unlock it... then it works...
I have this CSS (just a part of it) :
html, body {
margin: 0px 0px 0px 0px;
font-family: "Trebuchet MS", sans-serif;
background-color:#FFF2E6;
height:100%;
overflow:hidden;
}
#content {
margin-top:5px;
margin-left:170px;
position:fixed;
float:right;
width:88%;
height: 85%;
display:inline;
overflow:auto;
background-color:#E5E5E5;
}
#main_content {
position:static;
width:99.8%;
height: 85%;
}
The HTML page (just the interested block) :
<div id="main_content">
<div id="menu">
<p>Menu</p>
... menu block ...
</div>
<div id="content"><p>Content</p></div>
</div>
Is there any way to solve the Safari div scroll stuck problem?
Thanks very much for your help and sorry for my english.
Just a lucky shot, not sure if it will work:
try using zoom:1; in your #content css block. Although its not an widely 'supported' tag but I recall that it did miracles for some css in IE, perhaps it will work for Safari too.
Sorry if I am wrong.
The problem is that I have a PHP generated page that is printed in the #content div via Ajax functions, well, this page has some iframe tags for files upload (the only working trick to upload a file in a jQuery/Ajax context..) These iframe had the src property set to src='#' what made Safari stuck on a simple div scrolling...
So if you encounter a problem like this just remember to fix your iframe src="#" to iframe src=".
code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<style>
#boxTop{
margin-bottom:20px;
border:1px solid green;
}
#box1{
float:left;
border:1px solid blue;
}
#box2{
clear:both;
border:1px solid red;
}
</style>
</HEAD>
<BODY>
<div id="boxTop">test</div>
<div id="box1">test</div>
<div id="box2">bottom</div>
</BODY>
</HTML>
check it here
in IE,why has a padding in #box1 and #box2 ? how to fix it?
What you've come across is the IE hasLayout "feature".
Getting #box2 to have layout will fix this issue. If you are concerned with IE7, add min-height: 0; to the style for #box2, like so: http://jsfiddle.net/VTmes/
UPDATE:
There also seems to be a big with the first element on the page having a margin. I tried to remove the margin-bottom and add a margin-top to the box1 and it works. Have a look here: http://jsbin.com/uqide3/6
ORIGINAL ANSWER:
Different browsers have different default margins and paddings. Reset this at the top of your CSS and you should not have these differences.
The simplest but not very efficient reset is:
* { margin:0; padding:0 } /* '*' affects everything (all elements) */
One I've been using recently is:
html,body,h1,h2,h3,h4,h5,p,ul,li,form,button,div { margin:0; padding:0 }
Google 'CSS Reset' and you should see many variations, some claiming to be better than others. My take is use the minimum that works for you.
One other approach is to not use one at all, and just set the properties you need as you polish your design. Read this for a deatailed explanation: http://snook.ca/archives/html_and_css/no_css_reset/
float:left
property seems to be problem in IE. Even though we set margin and padding to 0, still rendering is not as expected in IE. Try to use span instead of possible in place of 2nd div and remove float:left property.
I am rendering a small menu in the upper right-hand corner of a web site. There will always be a "Banner" graphic across the top of the page (1024x80 pixels) and the menu must render on top of it. In IE 7, IE 8, FireFox and Safari, the menu looks fine. In IE 6, however, the menu does appear sometimes and fails to appear at other times with no discernable pattern. In the CSS shown below, I placed the "z-index" in the class definitions after reading that this was a fix for some CSS problems of this type in IE 6. However, there is still no joy in Renderville. ANY help will be appreciated!
Here is the CSS defined for the page, the header and the menu:
Div.XPage { background-color: White; position:relative; width:1024px; border-left:1px solid #a4a4b1; border-right:1px solid #a4a4b1; margin:auto; text-align:left; z-index:10; }
Div.XHeader { background-color: White; clear:both; padding:0px; margin:0px; z-index:2; }
Div.XTopMenu { position:absolute; left:810px; top: 0px; width:214px; height:16px; background-color:#333333; z-index:3; }
Div.XTopMenuItem { width:70px; height:14px; margin-bottom:3px; text-align:center; float:left; }
Div.XTopMenuItem a { color: White; font-size:smaller; }
Here is the HTML that uses these CSS classes:
<div class="XPage">
<div class="XHeader">
<a href='/Home.aspx'><img src="/images/Header.png" alt="Banner Graphic" border="0" width="1024" height="80" /></a>
</div>
<div class="XTopMenu">
<div class='XTopMenuItem'><a href='/Home.aspx'>Home</a></div>
<div class='XTopMenuItem'><a href='/Calendar.aspx'>Calendar</a></div>
<div class='XTopMenuItem'><a href='/Logout.aspx'>Log Out</a></div>
</div>
...
</div>
IE6 has issues with z-indexing. In IE6 z-index is only respected for siblings.
Things I'd try:
Reverse the order of menu and header in the html
Give the header a negative z-index
Give the menu a more significant lead on z-index than the header, say z-index:999.
Failing those you could try giving IE6 a different header image that didn't cover up where you want the menu to go. In many cases I've strived for IE6 to have degraded support, it's an ancient browser and has way too many problems. So if it's an option I'd consider letting it have a slightly different appearance. Of course that may not be up to you.
z-index only works on positioned
elements (position:absolute,
position:relative, or position:fixed).
You do not have these on Div.XHeader thus that z-index is being ignored completely.
Read more about z-index on w3schools
No directly useful info, I'm afraid, just another suggestion in case you're sufficiently desparate:
Google has managed to solve this problem, and many more, in GWT. Hold off on the downvotes, please - I'm not sugesting rewriting the app in GWT. I am, however, recommending to look at their code. In their implementation of various components, they have sections, sometimes whole classes, dedicated to working around particular quirks in WebKit, Opera, IE6... Their code is very clear and well commented, often including not just "what" but also "why".
How effective this approach is will depend on how good you are at zeroing in on relevant code (in Java), understanding it and moving the implementation of the essentials to your own code.
Why z-index 10 for the Page? It's supposed to be way in the background, right? Could you try setting its index to 0 or 1?
Heres the link:
DAMNIE6TOHELL
As you can see if viewed in glorious 'IE6-o-color', the footer is shifting 1px over to the left.
I'm struggling to find a fix for this, I've whittled it down to a bare minimum of HTML.
Is it something to do with haslayout perhaps? Any help much appreciated.
This looks like it's a case of the IE6 1px jog which can be solved by a few different fixes.
You will only want to apply these fixes to IE6, using your favourite method (conditional comments, star html hack, whatever). You could
apply background position to #container_bottom
container_bottom { background-position:1px 0; }
apply a left margin or padding to #container_bottom
container_bottom { margin-left:1px; }
or float #container_bottom to the left and give it a width
container_bottom { float:left; width:800px; }
Any of those seemed to work for me.
Add
background-position: 50% top;
to the css of container_bottom.
It works for me with IE Developer toolbar, but it's on a IE6 Virtual machine, so I'm not sure about real world results