I'm working on a ticket system for my website and I have this unusual space at the top of the page for some reason in firefox, but not in chrome, opera, safari, or IE. Just firefox. Anyone know why?
Url:http://beta.campatet.com/tickets/
Check images below:
Chrome:
Firefox:
The h1 element is pushing the header down. Try adding clear: both; to the h1 element's css.
Try clearing your floats. (ul, li)
<h1 style='clear:both'></h1>
Related
I have an iframe that has content which is too long for the iframe. I set the CSS to overflow: auto; and added the HTML attribute scrolling="yes". In Firefox, Opera, Safari and Chrome, scrollbars appear. In IE10, they do not and some of the content gets cut off.
How do I get scrollbars to appear?
instead of overflow:auto;, try overflow:scroll; which makes it auto. I had a similar problem and it worked for me.
The navigation looks perfect in every browser (Chrome, Firefox, IE9) but in Safari Mac it "Learning Center" in the navigation isn't stretching far enough.
It's like it's missing some padding or margin on all the menu items.
Here's the link for the site. http://previewyournewwebsite.info/otsl/about-us
Why doesn't it work in Safari and what can I do to fix the issue?
In the body trying making it the full with and setting margin to 0:
html, body
{
width: 100%;
margin: 0px;
}
My site design requires a background image running across the top of the page. You can see what it is supposed to look like in this screenshot. Link to my site.
Unfortunately, I used Firefox to check my work while putting this together. I used FireFox, because it has Firebug. The site looks right in Firefox, but wrong in Safari, Chrome, and IE. In Safari, Chrome, and IE, the background body wrapper background image is below the menu. Example screenshot where background at top is wrong.
Is there an easy fix to the background image, so it will work in all browsers, or do I have to take a few steps backward to fix some basic problems in my markup?
The margin on #nav is collapsing (https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing) because its parent (#wrapper) has no top margin, padding, or border to contain it. A quick-and-dirty fix for your problem would be to add padding-top: 1px; to your #wrapper CSS.
Change the margin property of #nav and add padding to #wrapper equal to the height of your background image.
#nav {
margin: 0 auto;
}
#wrapper {
padding-top: 85px;
}
http://ratest3.com/spare-2/
The main content area is floating up over the header image only in FireFox. I've checked it in the latest-greatest of Safari, Chrome, IE and on my Galaxy S3.
Help :)
Try adding clear: right; to the #main CSS declaration. That fixed it for me in Firefox.
Alternatively, you could probably apply a clearfix class to the #branding div. (I didn't try that though.)
I would like to display an svg that flows over the screen but I don't want to see scroll bars. setting overflow:hidden in the body works for chromium and opera but not for Firefox 3.6. Anyone know a fix? Thanks.
html, body { overflow:hidden }
Works for me: http://phrogz.net/tmp/wide_svg.xhtml