I have a bottom border of:
div#footer-case{
border-top:solid black 1px;
width:100%;
margin:8% auto;
}
but the border does not span the whole page, instead there are about 5px on the left and the right.
i set the width to 100%, but i do not know why it will not fully go left to right
If you don't want to edit the default browser margin of the body, try this:
div#footer-case
{
border-top:solid black 1px;
width:103%;
margin-left:-10px;
}
Tested with FF 8, Chrome 16, and Safari 5 on OS X Lion.
Browsers have default margin on the viewport, usually set in modern browsers on the body element. Try resetting it with this:
body {margin:0;padding:0;}
It may help in ongoing development efforts to implement a nice CSS reset such as this one:
http://meyerweb.com/eric/tools/css/reset/
Or even just studying default user agent stylesheets and how resets work would help understand all the fun little challenges we have to confront to get CSS to bend to our wills and behave consistently. Here's a nice article on the subject:
http://meiert.com/en/blog/20070922/user-agent-style-sheets/
body {
margin: 0px;
padding: 0px;
}
.footer
{ height:125px; width:103; position:relative; background-color:#333; color:#FFF; margin-left:-10px;}
I've built a site using the contempt theme (wordpress) and I'm changing it's CSS to make it wider.
The problem is that I can make it look great on either Internet Explorer or Firefox and chrome but not all 3 at the same time.
If I remove the sidebar tag:
#sidebar {
width:200px;
padding:20px 200px 10px;
}
the page looks OK on IE (as it now - physiocall.co.il) but the sidebar is hidden in Firefox and chrome.
If I add this little tag to the css -
The site looks great on Firefox and chrome (the sidebar pushed left to it's place)
but on IE it goes down - below the entire page.
Any ideas how can I change the css to make it look correct on both IE and Firefox.
Any ideas what cause FF and Chrome to render the css in one way, and IE in another way ?
Thanks.
the entire CSS:
#content {
float:right;
width:649px;
margin:-50px 30px 0;
padding:0 0 20px 45px;
}
#topbar {
max-width:950px;
height:25px;
line-height:23px;
background:#FFFFE6;
overflow:hidden;
border-bottom:1px black solid;
margin:0;
}
#pagebar {
background:url('images/blue_flower/pagebar.jpg');
width:950px;
height:35px;
border-bottom:1px black solid;
margin:0;
padding:0;
}
#pagebar .children li,#pagebar .sub-menu li {
min-width:105px;
border-left:1px #e1e1e1 solid;
border-bottom:1px #e1e1e1 solid;
margin:0;
padding:0;
}
#pagebar ul a {
background-color:#f1f1f1;
width:101px;
}
#page {
width:950px;
}
#sidebar {
width:200px;
padding:20px 200px 10px;
}
sorry to say that, but you should start from scratch and completly rearrange your html output and css. maybe this is a coding practice due to rtl but your #content appears before the sidebar and has a float:right while your sidebar is positioned left to the content with a margin-left:530px.
and your content has a 640 width..
that can't work out and is not to be fixed by some niffty css trick.
sorry.
Since it works in IE but not the modern browsers, this tells me you used IE as your initial test. Never, ever do that. IE is 12 years behind all others in modern standards and compliance. Inept at best, you should never trust IE to do anything right.
It's been a long time since I've used frames so I'm not sure that the lack of a doctype on your index page, which puts you into quirks mode, is causing the problems.
So, while reworking your markup, use any browser but IE for the initial test. Then look to see how IE screws it up. The quirks and bugs in IE are well known, as are the hacks to fix it.
The solution was
#sidebar {
float:left;
width:200px;
margin:-20px 10px 5px 5px;
}
It looks like IE and FF had the opposite default value to the float parameter, hence making it impossible to set it straight. once given a float value, the margin fixed the rest for both browsers.
I'm still relatively new to CSS, but after lots of Stack Overflow reading, I have figured out how to add "headers" to a panel. Yay, go me. But the problem I'm running into is that one of my panels in particular won't render properly in Firefox. I've been doing all development work in Chrome, and I just now noticed this issue. The weird part is, I'm able to add my "header" (might be better to call it a div wrapper?) to other panels and they look fine - it's just 1 panel that is giving me issues I can't figure out why. To see what I mean, look at http://www.mobiuspc.com in both Firefox and Chrome. The difficult panel in question is title "System Construction Area" - the teal colored border in Firefox sprays itself everywhere, whereas in Chrome it displays properly.
Here is the CSS to the difficult panel:
.dropareaparent
{
height:528px;
width:690px;
margin-left:332px;
margin-top:-540px;
background-color:teal;
text-align:center;
color:White;
}
.droparea
{
height:500px;
width:680px;
margin-left:2px;
padding:3px;
color:Black;
background-color:White;
text-align:left;
float:left;
}
Here is the CSS to a different panel that is working great in both browsers:
.primarystatdivparent
{
height:428px;
width:266px;
margin-top:-530px;
margin-left:1045px;
background-color:teal;
text-align:center;
color:White;
}
.primarystatdiv
{
height:400px;
width:256px;
margin-left:2px;
padding:3px;
color:Black;
background-color:White;
text-align:left;
}
Other than my absolute positioning (still learning how to float things), to me the CSS between the problematic panel and the perfect panel appear to be the same?
For reference, IE looks fine as well (other than slow Javascript execution).
It seems a bit over-complicated. If - for example - you float your filterboxareaparent left, there is no need for large negative margin on dropboxareaparent.
I'd try to position the elements in a more logical way so the results will be more consistent across different browsers.
You need a negative margin-top for .droparea as well.
I have an image over a table that has been style with CSS. When I have my image on the table without a href it is fine, once I apply an href the transparency is no longer working. Any way around this?
Table css
table.list_data {
background-color:#F3F3F3;
border:1px outset #A1A1A1;
border-collapse:collapse;
border-spacing:2px;
font-family:'MS Shell Dlg';
font-size:13px;
font-style:normal;
font-variant:normal;
font-weight:normal;
width:100%;
}
Happens in Chrome and FF, haven't tried IE but I expect the same.
html.....
<td><img alt="Add A job" src="images/add.png"/></td></tr><tr><td>joe bloggs</td>
try adding the following:
a{
background: transparent !important;
}
a img{
background: transparent !important;
}
This is not a terribly good idea to do in a production site. This indicates that there is something wrong with your css code. Try looking through the css and find whatever is causing your anchor tags to have a non-transparent background.
If you want to assure that you have transparent PNGs no matter how the code is, use TweakPNG.
http://entropymine.com/jason/tweakpng/
Sometimes I get a broken background in Chrome. I do not get this error with any other browser.
This is the simple CSS line responsible for the background color of body:
body
{
background: black;
color: white;
font-family: Chaparral Pro, lucida grande, verdana, sans-serif;
}
This is exactly how I get this problem. I click a link included in an Gmail's email and I get something wrong (no background). I then refresh the page and the background is colored completely.
How do fix this problem?
Never heard of it. Try:
html, body {
width: 100%;
height: 100%;
background-color: #000;
color: #fff;
font-family: ...;
}
Ok guys, I found a solution,
. It's not great but does the trick with no side effects.
The HTML:
<span id="chromeFix"></span>
(put this below the body tags)
The CSS:
#chromeFix { display: block; position: absolute; width: 1px; height: 100%; top: 0px; left: 0px; }
What this does to solve the issue:
It forces Chrome to think the page's content is 100% when it's not - this stops the body 'appearing' the size of the content and resolves the missing background bug. This is basically doing what height: 100% does when applied to the body or html but you don't get the side effect of having your backgrounds cut off when scrolling (past 100% page height) like you do with a 100% height on those elements.
I can sleep now =]
I had the same issue on a couple of sites and fixed it by moving the background styling from body to html (which I guess is a variation of the body {} to html, body{} technique already mentioned but shows that you can make do with the style on html only), e.g.
body {
background-color:#000000;
background-image:url('images/bg.png');
background-repeat:repeat-x;
font-family:Arial,Helvetica,sans-serif;
font-size:85%;
color:#cccccc;
}
becomes
html {
background-color:#000000;
background-image:url('images/bg.png');
background-repeat:repeat-x;
}
body {
font-family:Arial,Helvetica,sans-serif;
font-size:85%;
color:#cccccc;
}
This worked in IE6-8, Chrome 4-5, Safari 4, Opera 10 and Firefox 3.x with no obvious nasty side-effects.
I was able to fix this with:
html { height: 100%; }
HTML and body height 100% doesn't work in older IE versions.
You have to move the backgroundproperties from the body element to the html element.
That will fix it crossbrowser.
Simple, correct, solution - define the background image and colour in html, not body. Unless you've defined a specific height (not a percentage) in the body, its height will be assumed to be as tall as required to hold all content. so your background styling should go into html, which is the entire html document, not just the body. Simples.
After trying all of the other solutions here without success, I skeptically tried the solution found in this article, and got it to work.
Essentially, it boils down to removing #charset "utf-8"; from your CSS.
This seems like a poor implementation in DreamWeaver - but it did fix the issue for me, regardless.
I am not sure 100%, but try to replace selector with "html, body":
html, body
{
background: black;
color: white;
font-family: Chaparral Pro, lucida grande, verdana, sans-serif;
}
I would try what Logan and 1mdm suggested, tho tweak the CSS, but I would really wait for a new Chrome version to come out with fixed bugs, before growing white hair.
IMHO the current Chrome version is still alpha version and was released so that it can spread while it is in development. I personally had issues with table widths, my code worked fine in EVERY browser but could not make it work in Chrome.
Google Chrome and safari needs a tweak for body and background issues.
We have use additional identifier as mentioned below.
<style>
body { background:#204960 url(../images/example.gif) repeat-x top; margin:0; padding:0; font-family:Tahoma; font-size:12px; }
#body{ background:#204960 url(../images/example.gif) repeat-x top; margin:0; padding:0; font-family:Tahoma; font-size:12px;}
</style>
<body id="body">
Use both body and #body identifier and enter same styles in both.
Make the body tag with id attribute of body.
This works for me.
Adam's chromeFix solution with Paul Alexander's pure-CSS modification solved the problem in Chrome, but not in Safari. A couple additional tweaks solved the problem in Safari, too: width: 100% and z-index:-1 (or some other appropriate negative value that puts this element behind all the other elements on the page).
The CSS:
body:after {display:block; position:absolute; width:100%; height:100%; top:0px; left:0px; z-index:-1; content: "";}
I had the same thing in both Chrome and Safari aka Webkit browsers. I'm suspecting it's not a bug, but the incorrect use of css which 'breaks' the background.
In the Question above, the body background property is set to:
background: black;
Which is fine, but not entirely correct. There's no image background, thus...
background-color: black;
I'm seen this problem with Chrome too, if I remember correctly if you minimize and then maximize your window it fixes it as well?
Haven't really used Chrome too much since it was released but this is definitely something I blame on Google as the code I was checking it on was air tight.
Everybody has said your code is fine, and you know it works on other browsers without problems. So it's time to drop the science and just try stuff :)
Try putting the background color IN the body tag itself instead of/as-well-as in the CSS. Maybe insist again (redudantly) in Javascript. At some point, Chrome will have to place the background as you want it every time. Might be a timing-interpreting issue...
[Should any of this work, of course, you can toggle it on the server-side so the funny code only shows up in Chrome. And in a few months, when Chrome has changed and the problem disappears... well, worry about that later.]
It must be a WebKit issue as it is in both Safari 4 and Chrome.
I'm pretty sure this is a bug in Chrome. Most likely it happens if you resize the browser TO full screen, then switch tabs. And sometimes if you just switch tabs/open a new one. Good to hear you found a "fix" though.
When you create CSS style using Dreamweaver for web designing, Dreamweaver adds a default code such as
#charset “utf-8″;
Try removing this from your stylesheet, the background image or colour should display properly
Source
body, html {
width: 100%;
height: 100%;
}
Worked for me :)
Here is how I ended up solving the problem:
This was the actual issue, clearly the body tag defined in CSS was not picked up.
My environment: Chrome Browser/Safari,
First time when it does not work, So according to the thread recommendation here I ended up adding the css file with the html entry
Sample CSS file: mystyle.css
<style type="”text/css”">
html {
background-color:#000000;
background-repeat:repeat-x;
}
body {
background-color: #DCDBD9;
color: #2C2C2C;
font: normal 100% Cambria, Georgia, serif;
}
</style>
Sample html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta name="generator" content="HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.6), see www.w3.org">
<title>Test Html File</title>
<link rel="stylesheet" href="mystyle.css" type="text/css">
</head>
<body>
<h1>Achieve sentence with Skynet! READ MORE</a></h1>
</body>
</html>
After the first loading it will work in Chrome and then go back to CSS file comment the html entry, so your modified CSS will be
<style type="”text/css”">
// html {
// background-color:#000000;
// background-image:url('bg.png');
// background-repeat:repeat-x;
// }
body {
background-color: #DCDBD9;
color: #2C2C2C;
font: normal 100% Cambria, Georgia, serif;
}
</style>
Clearly seems to be bug in webkit, Saw the same behavior in Safari as well. Thanks for sharing the html information, have been hunting around forever of why the body tag was not working.
The final output is something like this:
Oddly enough it doesn't actually happen on every page and it doesn't seem to always work even when refreshed.
My solutions was to add {height: 100%;} as well.
My Cascading Style Sheet used:
body {background-color: #FAF0E6; font-family: arial, sans-serif }
It worked in Internet Explorer but failed in Firefox and Chrome. I changed it to:
body {background: #FAF0E6; font-family: arial, sans-serif }
(i.e. I removed -color.)
It works in all three browsers. (I had to restart Chrome.)
IF you're still having trouble, you may try switching 'top' to 'bottom' in chromeFix above, and also a div rather than a span
<div id="chromeFix"></div>
style:
#chromeFix { display: block; position: absolute; width: 1px; height: 100%; bottom: 0px; left: 0px; }