|
CSS - Problems Between Ff/opera And Ie5/6
Hi guys,
I am currently building a website for my union service, and need some help with CSS; particularly in getting it to render consistantly over different browsers. Although I use Firefox at home, the only browser available at work is IE5 (currently running under Windows NT). The Previews: Internet Explorer 5: Internet Explorer 6: Firefox: Opera: What I am trying to achieve is for the #navigation div to align with the sIFR header (this is rendered correctly in IE5/IE6). Firefox and Opera seem to offset the header, meaning that the header and #navigation div no longer align. The 'perfect' rendition seems to be IE6 - if anyone knows what I may need to adjust in me CSS to get this to work consistantly I would really appreciate it. You can see the beta version of the design at: http://www.algus.org.uk/xhtml.php Thanks, Saj Similar TutorialsI am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container. Anyone know why there is a shift, and what I can do about it? Style sheet code pasted below: Code: body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3;
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}
h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}
h2 {
font-size:2em;
}
h3 {
font-size:1.5em;
}
h4 {
font-size:1.25em;
}
a:link {
color:#8090AC;
text-decoration:none;
}
a:visited {
color:#B17F6C;
text-decoration:none;
}
a:hover {
color:#E9DF55;
text-decoration:underline;
}
a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}
#header {
height:200px;
width:760px;
margin:0;
padding:0;
}
#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
font-size: 12pt;
color: #e9df55;
background-color:transparent;
text-indent: 200pt;
vertical-align: text-bottom;
}
navigate{
color : #105BAC;
background-color : transparent;
height : 20px;
font-size: 100%;
border-top : 1px solid #999999;
}
#navigate ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 150px;
margin-right: 0px;
padding: 2px 0 0 0;
}
#navigate ul li {
display: inline;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 14px;
color: #FFFFFF;
left: 50px;
right: 50px;
}
#main {
width: 660px;
padding-right: 50px;
padding-left: 50px;
}
#footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #666666;
height: 100px;
width: 760px;
vertical-align: text-bottom;
text-align: center;
}
#SplashImage {
float: left;
}
.image-left {
clear: none;
margin-bottom: 10px;
float: left;
margin-right: 20px;
margin-left: 10px;
}
.image-right {
clear: none;
margin-bottom: 10px;
margin-left: 10px;
float: right;
}
Hi, Av just check my website in Opera for the mac and found something annoying.. I have problems with my header and footer.. Screenshots: http://i45.photobucket.com/albums/f56/phi21/Picture1-6.png Header cut off http://i45.photobucket.com/albums/f56/phi21/Picture2-3.png massive footer Works fine in everything else.. what could be happening ? Thanks www.leehughes.co.uk Hi everybody, i'm quite new to the whole css stuff, but i managed to write some code to my own satisfaction. The problem is that it is not properly presented in Opera 7.51, which i am using. Though it shows to my wishes in IE. the test version can be found at http://users.pandora.be/jef_patat/test/index.htm and the stylesheet at http://users.pandora.be/jef_patat/test/visualstyle2.css It is my intention to have four areas that can stretch in function of their content (the menu, news, validation and main content areas). This works fine in IE but in Opera I get some strange blank areas which i can not solve. I know my css is not perfect but i did the best i can. I would like to use another stylesheet for people with lower bandwiths, this stylesheet is found at http://users.pandora.be/jef_patat/test/visualstyle3.css With this stylesheet one can clearly view i mess up. It should give a simular result as the other stylesheet so i can use the same html code. The outer black border should stretch down the page and i would like some space underneat it as well. Anyone can help? Kind regards Jef Patat Ok, I've created an XHTML/CSS site that looks fine in IE5+, Mozilla, FireFox and Netscape. It almost works in Opera and on a Mac but it seems something slightly is going wrong. The biggest problem is on the Mac, while the page looks fine, for some reason part of the left div goes over to the right, making the right div drop below it. I am sure it is just a CSS problem with the position or maybe float but if I could get someone to pin point the problem it would save me a lot of time. Also on the Mac and in Opera, my columns have a gap at the very bottom of the page somehow, not quite sure why? They seem fine in the other browsers. Also, just another quickie, in IE4.0 does it not support columns of floats? My site just expands the full length and ignores the float left rule, any ways to get round this? The site URL is: www.gladiatorszone.co.uk/home/gladiators/ Thank you in advance to anyone that can help. My navigation resizes and moves in every browser except in Opera. Also, the placement of the navigation in Opera is incorrect. I have a feelin the root of the cause is that I've set a % width on my nav div. Is there a way around this mess?? A hack maybe? My site is http://www.marginalspace.com . You will need to click on the white square on the right-hand column to get the style in which this problem occurs. Any help would be greatly appreciated. The stylesheet in question is white.css . Amit the url is: http:// jhlmc.com/JHLMC/FreshDemoFiles/CoverTToLayers_JHLMCArt.html In IE8 beta it works perfectly. In firefox the entire bottom section (the part under the slide show) is messed up. In Opera there's a gap under the play controls. If I close the gap, it messes up IE. Getting this slide show to work was quite the task, but I'm close to having it work on the big three! Should I just un-nest everything? I'm hoping I can get some guidance on why I can't get this popout menu to work! I used the code from this article to build a popout menu, but for some reason I can't get it to work in firefox. If you test their demo in Firefox but if you test mine, it looks great in Internet Explorer, but gets all messed up Firefox & Opera. If you save the page you will see there is a style sheet as well as a small Javascript file too. If someone could check over my code for me that would be great! I have been staring at it for hours and can't seem to find the problem! This is my first project using CSS styles to control something besides the usual things like fonts, etc. so go easy on me! Thanks in advance! Chelsea For some reason, this PHP Code: input.headtext {background-color: #515153;border: 0px outset #515153;} leaves a bright yellow hideous border around the input field. Is there any way to get rid of that? This works fine in IE and Netscape, but Opera 7.x makes it look like ****. hey, I have problems with getting CSS to display properly in Opera. http://www.hostultra.com/~lunaxy/home.php this host SHOULD be working. Anyway, the problem is with the side navigation menu. In Opera, theres gaps between the top and left bits (I used these to create the curved box effect). How do I get rid of this? 2nd problem. How do I move the top right navigation to the far right side. I can't float it without making it look bad in Opera (but IE and mozilla are fine). I want the stuff in the yellow box to be at the right side. thanx ppl! I use Opera browser all the time and notice a couple problems while using Jupitor Portal script, the fault is on Opera so I need a way to fix this. 1. Block had some sort of padding or whitespace on the right side for some reason. 2. Search button width is short. Problem in red: URL Site: URL CSS: URL Can someone give me a solution or work around for this problem. P.S: I'ved tried adding margin: 0; padding: 0; to con1 but that didn't work. Hello there! I am new here.. So Hello to all of you people. I am having a problem. I run my website locally and i can preview it fine in chrome, firefox and ie.. but i have a problem with opera. I see a white space under my footer.. Let me give you my code and please tell me your opinions! Code: * { padding:0; margin:0 0 0 0px; outline:0; }
html, body { height:100%; }
Code: /* center all content */
.center { width:950px; margin:0 auto; }
/* keep all content except footer */
#wrapper,
#wrapper-error
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -82px;
}
#wrapper-error { margin-bottom: 0px; }
.footer
{
width:100%; height: 82px;
position:relative;
background-image: url('../images/bgfooter.jpg');
background-repeat: repeat-x;
-moz-box-shadow: 0px -13px 130px 20px #808080;
-webkit-box-shadow: 0px -13px 130px 20px #808080;
box-shadow: 0px -13px 130px 20px #808080;
}
.push
{
width:100%; height: 82px;
position:relative;
}
Thank you! Please have a look here with Opera. As you can see, the background image is pushed to the top and all you can see it's a little part of the image. Here's part of the css code: Code:
body
{
background: #FFF url(img/bg_body.jpg) no-repeat bottom right;
}
How could I solve it? I can't set a fixed height because in lower res the layout goes bye bye. Hi all, I got my css layout to work in Opera, which is already an achievement for a newbie like me. But I'm facing some problems with FF and IE. First: in both the header image is gone Second: in IE the menu images are shown too wide resulting in a messed up menu Third: IE for some reason widens up the sidebar and content so the sidebar is shown below and also the footer is misplaced. I'm still trying to debug it myself but I don't seem to be able to solve them. my blog Any help or ideas are appreciated. Kind regards, Jef Hi everyone Hoping someone can help with a niggly problem. My site is working great in Mozilla but I'm getting a gap between two divs in IE6 and Opera 7. Compare the following in IE6, Opera 7 and Mozilla and see the gap below both the 'welcome' and 'latest' graphics: http://www.crashingbydesign.com.au/newsite/ The relevant code is as follows: Code:
<div id="content_container">
<div id="belowbg">
<div id="left">
<div id="h3lft">
<h3>Welcome</h3>
</div>
<div id="contentlft">
<p>Lorem ipsum ...</p>
</div>
<div id="footlft"></div>
</div>
<div id="right">
<div id="h3rght">
<h3>Latest</h3>
</div>
<div id="contentrght">
<p>Lorem ipsum ...</p>
</div>
<div id="footrght"></div>
</div>
</div>
<div id="footer">
<p>text</p>
</div>
</div>
The relevant CSS is as follows: Code:
#content_container {
position: absolute;
top: 406px;
left: 50%;
margin: 0 0 0 -372px;
width: 742px;
height: auto;
z-index: 10;
}
#belowbg {
padding: 0 11px 11px 11px;
width: 720px;
height: auto;
background-color: #313131;
}
/*hack to ensure that Mozilla encloses the floats with the #belowbg div*/
#belowbg:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#left {
float: left;
width: 481px;
height: auto;
padding: 0;
margin: -25px 0 0 0;
}
#h3lft {
width: 481px;
height: 25px;
background: url(images/welcomehd.gif) no-repeat;
text-indent: -9000px;
display: block;
position: relative;
margin: 0;
padding: 0;
}
#contentlft {
width: 459px;
height: auto;
background-color: #293942;
border: 1px solid #636B73;
margin: -1px 0 0 0;
padding: 10px 10px 0 10px;
font-size: 1.2em;
line-height: 1.6;
display: block;
}
#footlft {
width: 481px;
height: 20px;
margin: -1px 0 0 0;
background: url(images/welcomeft.gif) no-repeat;
display: block;
}
#right {
float: right;
width: 230px;
height: auto;
padding: 0;
margin: -25px 0 0 0;
}
#h3rght {
width: 230px;
height: 25px;
background: url(images/latesthd.gif) no-repeat;
text-indent: -9000px;
display: block;
position: relative;
margin: 0;
padding: 0;
}
#contentrght {
width: 208px;
height: auto;
background-color: #525252;
border: 1px solid #636B73;
margin: -1px 0 0 0;
padding: 10px 10px 0 10px;
font-size: 1.2em;
line-height: 1.6;
display: block;
}
#footrght {
width: 230px;
height: 20px;
margin: -1px 0 0 0;
background: url(images/latestft.gif) no-repeat;
display: block;
}
#footer {
position: relative;
top: 0;
left: 0;
width: 720px;
height: 188px;
padding: 20px 10px;
margin: 0;
background: url(images/btmhatlines.gif) right no-repeat;
font-size: 1.1em;
line-height: 1.6;
text-align: center;
}
Can anyone see my mistake? Cheers Hi, Well, they're at it again, those cheeky browsers. Check it out. I have a site that consists of a main, central container, with a background image of 675x1px. So far I also have a top banner and a menu bar both 600px wide. The extra 75px are drop shadows either side of the main box of colour. In IE, I put my banner and menu divs into the container and everything works fine - they're nicely centred and look good. However, in opera/firefox, the divs are over to the left of the central container, and hence screw everything up. Also, even though my central container has 100% height, in Opera it doesn't extend to the bottom of the page. Here's the CSS: Code:
/* CSS Document */
body
{
background-color:#E1FFDC;
text-align:center;
margin:0px;
}
#container
{
width:675px;
height:100%;
background-image:url(mainbg2.gif);
background-repeat:repeat-y;
margin-left:auto;
margin-right:auto;
text-align:center;
}
#mainphoto
{
width:600px;
height:278px;
margin-left:2px;
background-image:url(maintop.jpg);
position:relative;
}
#menubar
{
width:600px;
height:39px;
margin-left:1px;
position:relative;
}
mainbg2.gif is the central container background And the page is here Any help would be much appreciated. Cheers NEWSFLASH Problem solved - i basically just took the images out of their divs. I still have a problem with Opera not stretching the div down though, but I think that will be solved once I put some content in. See how links went up. how to put them in middle I have created a navbar to be absolutely positioned in the header; works fine in FFox and IE/Win. Works in Safari as well. But Opera 7/Win and IE 5/Mac don't treated the positioning correctly. I've got the XHTML to validate. Don't know what's up. Take a look: http://dev3.witechcolleges.org/ Thanks. Hey everyone, My page renders correctly in Safara, Firefox and Internet Explorer. However Opera 9.27 causes a bit of concern. The stylesheet is as follows Code:
html, body, h1, h2, h3, h4, ul, li {
margin: 0;
padding: 0;
}
h1 img {
display: block;
}
img {
border: 0px none;
}
a {
color: #464544;
}
a:hover {
color: #FFA405;
}
.left {
float: left;
}
.right {
float: right;
}
.clear {
clear: both;
}
body {
background: #ECF4F7;
text-align: center;
font: 11px verdana, arial, sans-serif;
color: #695F4C;
padding-bottom: 10px;
}
/** layout **/
#wrapper {
text-align: left;
margin: 37px auto;
width: 839px;
background: #ffffff;
position: relative;
padding: 0;
}
#header {
background: #D9D1BC url('images/logo.jpg') no-repeat;
height: 192px
}
#nav {
background: #4B5360;
position: absolute;
top: 153px;
left: 339px;
width: 499px;
height: 20px;
padding: 9px 0px;
text-align: center;
margin: 0;
}
#nav li {
list-style: none;
display: inline;
color: #fff;
}
#nav a {
text-decoration: none;
color: #fff;
}
#body {
background-color:#FFF;
}
#postheadb {
font: 10px verdana, arial, sans-serif;
font-weight: bold;
color: #FFFAF0;
float: right;
width: 500px;
background: #2dbaa7;
}
#postheadb .inner {
padding: 6px 12px;
width/**/:/**/ 501px;
Height/**/:/**/ 10px;
}
#postheadab p {
margin: 0.9em 0;
}
#posthead {
font: 10px verdana, arial, sans-serif;
font-weight: bold;
color: #FFFAF0;
float: right;
width: 839px;
background: #2dbaa7;
}
#posthead .inner {
padding: 6px 12px;
}
#posthead p {
margin: 0.9em 0;
}
#contentb{
font: 12px verdana, arial, sans-serif;
color: #cad10e;
float: right;
background: #40789d;
}
#contentb .inner {
padding: 6px 12px;
width/**/:/**/ 476px;
Height/**/:/**/ 52px;
}
#contentb p {
margin: 0.9em 0;
}
#content{
font: 12px verdana, arial, sans-serif;
color: #cad10e;
float: right;
width: 839px;
background: #40789d;
}
#content .inner {
padding: 12px 12px;
}
#content p {
margin: 0.9em 0;
}
#copyright {
text-align: center;
background: #030303;
font-size: 9px;
padding: 2px;
width/**/:/**/ 92.8em;
Height/**/:/**/ 3em;
}
input
{
color: #FFFAF0;
background: #40789d;
vertical-align: middle;
}
.email input
{
position:absolute;
left: 40px;
top: 20px;
color: #781351;
width: 225px;
background: #fee3ad;
}
#sidebar
{
margin-bottom:0;
float: left;
background: #D3D3D3;
padding: 395px 169px;
Height/**/:/**/ 70px;
}
.videobar {
position:absolute;
left: 20px;
top: 200px;
height: 600px;
width: 300px;
float: right;
padding: 10px;
}
.password input
{
position:absolute;
left: 40px;
top: 60px;
color: #781351;
width: 225px;
background: #fee3ad;
}
#login{
font: 10px verdana, arial, sans-serif;
font-weight: bold;
color: #FFFAF0;
float: right;
width: 839px;
background: #2dbaa7;
}
#searchTerm{
width: 125px;
height: 15px;
}
#submitsearch{
height: 22px;
}
#login .inner {
padding: 90px 12px;
}
#login p {
margin: 0.9em 0;
}
.submit input{
position:absolute;
left: 40px;
top: 90px;
width: 55px;
height: 22px;
padding: 0;
}
fieldset {
border: 1px solid #781351;
position: absolute;
left: 300px;
height: 130px;
top: 215px;
width: 300px;
}
legend {
background-color: #ffa20c;
border: 1px solid #781351;
line-height: 1.5em;
position: relative;
top: -0.75em;
}
The website displayed in Firefox can be seen here Firefox and Opera here Opera many thanks, Doug looks perfect in Moz and IE...but any time I set a padding it overhangs the actual width. So the below code creates a 1010px wide result...is there a workaround for Opera sucking? Code:
.topa { width: 1000px; padding: 5px; background:#000000 }
edit: nesting a div and putting the padding on it without a background seems to work...while I'm sure it is overhanging the same way, at least it doesnt LOOK that way. My little attempt to create a totally horizontal layout crashed against that crap Opera. Here's the page, and some piece of code: Code:
body
{
height: 400px;
width: 2000px;
border-bottom: solid 1px #000;
background: #fff url(img/bg_body.jpg) no-repeat top right;
margin: 0px;
}
As you can see, in Opera the background image is not displayed at the top right of the body.. any ideas? I've tried the html width 100% trick but no luck. |
|||||||