I have a website at bgflirt.com that appears differently in FireFox and Chrome. This is how it looks in firefox:
and here's how it looks in chrome:
As you can see, in chrome (and safari) the page is not stretched to fit the entire screen. I'm using this code for positioning the div containing the flash on the right:
<div style="width: 200px; position: absolute; right: 0px; top: 10px; overflow: hidden;">
</div>
The page should look the way it does in firefox, in all browsers. Any ideas on how to fix this will be greatly appreciated !
With some quick tinkering, I managed to fix it. Dont know what it will do with other browsers though:
#content_wrap {
margin-left: 130px; //remove this
//other styles
}
edit: Also tried on IE8, appears that margin-left is a superfluous style.
Check if you do not have a zoom level set to lower than 100% in chrome
You might also want to set your div#container to 100% width
div#container {
padding: 0px 0px;
width:100%;
}
Related
I'm working on a website and I'm having an issue in declaring CSS padding-top.
My problem is that the padding is rendered in a different way in Firefox respect to Chrome or Safari. I saw this as soon as I switched my navbardiv to position: fixed.
Here it is a JSFiddle with basic code which shows the problem: http://jsfiddle.net/8puCW/3/
Is there a way to maintain fixed the header/topbar and the navbar without having differences in rendering?
thanks.
since you use the position:fixed (http://www.w3schools.com/cssref/pr_class_position.asp) for the .navbar, get rid of the padding-top to position the element and use the top property, as shown in this Fiddle: http://jsfiddle.net/8puCW/9/. I've tested it in FF Mac and it is consistent.
.navbar {
position: fixed;
background: #D0D1D0;
float: left;
text-align: center;
top: 54px; /*UPDATE HERE*/
width: 200px;
height: 100%;
padding-top:20px; /*UPDATE HERE*/ }
Over the past few weeks I've been developing a website for a friend of mine and while it works perfectly in most browsers, it breaks in 2 seperate ones.
I have a div, with css of
#div2 {
width: 70%;
margin: 0 auto;
display: block;
text-align: center;
}
In Chrome, Opera, Internet Explorer and many other browsers, it loads fine, and centers the div.
But in Firefox and Safari (Both on windows), the div stays on the left of the page.
div2 IS inside a parent div, but the parent div only has a border set on it, nothing else.
I've been trying for ages to rectify the issue, even using the #-moz-document url-prefix() css, but it still doesn't fix it.
Any suggestion would be gratefully recieved.
Try specifying "width: 100%" on the parent div. This same issue happens when there isn't a container div, and the solution is specify "html, body {width: 100%}", so this is likely the same case.
Use:
{
left:50%;
margin-left:-200px; //minus half of your div width
}
A Firefox moderator already gave a solution:
#div2 {
border: thin solid #000000;
width: 760px;
height: 1px;
margin-left: auto;
margin-right: auto;
}
I have tried relentlessly but I cannot get this element to centre in Firefox. It works on IE, my android phone, and Chrome.
I have a working copy for you to see.
www.novumdesign.co.uk/design.html
#header {
width: 900px;
height: 130px;
padding-top: 18px;
z-index: 3;
position: relative;
margin: 0 auto;
}
The margin specifically (line 195).
With this rule deleted, the gallery element snaps to the centre. But of course the header loses it's alignment.
Also, despite being HTML, the gallery viewer wont load on an iPhone, apparently... Perhaps I should fix the initial issue first?
Thanks!
.simpleviewer-mobile-glry{float:left;}
fix your problem
I want to display a button which takes all spaces of its parent which is himself absolute positioned.
But it seems that Firefox has a bug with it (All runs perfectly in Chrome and Safari (Webkits), I can't test on IE because I'm on mac (if anyone can test and say in comment if it runs or not, it would be really nice)).
The goal to achieve is :
Div and button are together contained by a wrapper which is absolute positioned.
The HTML code is :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.wrapper {
background-color: red;
position: absolute;
width: 100px;
height: 100px;
}
.inner {
background-color: blue;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
</style>
</head>
<body>
<div class="wrapper" style="top: 50px; left: 50px;">
<div class="inner">div</div>
</div>
<div class="wrapper" style="top: 50px; left: 200px;">
<button class="inner">button</button>
</div>
</body>
</html>
That's quite simple. The problem is that on Firefox, it renders like this :
Have you got any idea why Firefox renders this code like this and have you got any workaround using similar positioning ?
EDIT : I can't (and I don't want) set width and height on inner child. The reason is that I use GWT with layout mechanisms. GWT layout uses bottom/top/left/right to position and size elements, so I can't change this behavior. All runs with classic div. The problem is only button related.
Try adding
min-width: -moz-available;
to the .inner declaration.
I've found that it works even in Internet Explorer 7+. In IE6 it fails but it's hardly a surprise. Unfortunately it also fails in Opera exactly the way it does originally in Firefox.
The reason it renders like this is that <button> is a replaced element at least in Gecko and for replaced elements the rules on what left: 0; right: 0 means in CSS are different than they are for non-replaced elements...
Set a width and height for the inner div also.
I'm trying to workaround what looks like a bug in Opera.
The undesired behaviour
is that opera puts an unnecessary vertical scrollbar on the browser window.
This happens when I have an outer div which is position:relative and has overflow-y:auto and an nested inner div which is position:absolute and happens to be taller than the height of the browser window.
for example:
<style type="text/css">
#outer {
position: relative;
overflow-y: auto;
width: 200px;
height: 200px;
}
#inner {
position: absolute;
height: 2000px;
width: 50%;
border: 2px dashed blue;
background: deeppink;
}
</style>
<div id="outer">
<div id="inner">Inner</div>
</div>
Here is a demo:
http://www.jaysweeney.com.au/overflow_issue.html
Interestingly, as you can see from the above demo, this problem does not occur
for horizontal overflow.
Here is a screenshot of what I'm seeing in Opera:
http://www.jaysweeney.com.au/screen.png
I'm using Opera 11.01 on OS X.
If anyone knows a workaround for this issue, please let me know. At the moment I'm stumped
and its too much work to change my markup and javascript to not use absolute positioning.
Thanks in advance,
Jay.
It seems indeed like this is a bug of sorts.
Only workaround I can think of is to turn off the vertical scrollbar on the browser window completely by using body {overflow-y: hidden;}
However, it's possible that's a bit too radical a measure...