derange Posted January 4, 2009 Report Share Posted January 4, 2009 my css code body { margin: 20px 0 0 0; padding: 0; background: #679966 url(images/img01.jpg); font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 13px; color: #333333; } h1, h2, h3 { margin: 0; font-weight: normal; color: #000000; } h1 { font-size: 197%; } h2 { font-size: 167%; } h3 { font-size: 100%; font-weight: bold; } p, ol, ul { line-height: 180%; } p { } ol { } ul { } blockquote { margin: 0; padding-left: 20px; font-style: italic; } blockquote * { line-height: normal; } a { color: #000000; } a:hover { text-decoration: none; } img { border: none; } img.left { float: left; margin: 0 15px 0 0; } img.right { float: right; margin: 0 0 0 15px; } hr { display: none; } /* Header */ #header { width: 700px; height: 220px; margin: 0 auto; background: url(images/img02.jpg) no-repeat right top; } /* Logo */ #logo { float: left; width: 220px; height: 220px; background: #679966 url(images/img03.jpg); } #logo h1, #logo h2 { margin: 0; text-transform: lowercase; text-align: center; font-weight: normal; } #logo h1 { padding: 120px 0 0 0; background: url(images/img04.jpg) no-repeat 50% 30px; letter-spacing: -1px; font-size: 36px; } #logo h2 { font-size: 18px; } #logo a { text-decoration: none; color: #000000; } /* Menu */ #menu { float: right; width: 470px; height: 40px; padding: 180px 0 0 0; } #menu ul { width: 466px; height: 40px; margin: 0; padding: 0; background: #000000 url(images/img05.jpg) repeat-x; border-left: 2px solid #ffffff; border-right: 2px solid #ffffff; list-style: none; } #menu li { display: inline; } #menu a { display: block; float: left; height: 32px; padding: 8px 20px 0 19px; background: url(images/img06.gif) no-repeat; text-transform: none; text-decoration: none; font-size: 16px; font-weight: bold; color: #000000; } /* Page */ #page { width: 700px; margin: 0 auto; } /* Content */ #content { float: right; width: 430px; padding: 20px; background: #ffffff url(images/img07.gif) no-repeat left bottom; } /* Sidebar */ #sidebar { float: left; width: 220px; padding-top: 10px; } #sidebar a { color: #000000; } #sidebar ul { margin-left: 0; padding-left: 0; list-style: none; font-size: 92%; } #sidebar ul li { padding: 5px 14px; background: url(images/img13.gif) no-repeat 0px 12px; border-top: 1px solid #679966; } #sidebar ul li.first { border: none; } #sidebar ul li h2 { margin: 0; font-size: 100%; } #sidebar ul li h3 { margin: 0; font-size: 92%; } #sidebar ul li p { margin: 0; } .boxed { margin-bottom: 10px; background: #679966 url(images/img10.gif) no-repeat left bottom; } .boxed .title { height: 30px; margin: 0; padding: 10px 0 0 10px; background: #679966 url(images/img08.jpg) no-repeat; font-size: 16px; font-weight: bold; color: #000000 } .boxed .content { padding: 15px; background: url(images/img09.gif) repeat-x; } /* Search */ #search { } #search form { margin: 0; padding: 0; } #search fieldset { margin: 0; padding: 0; border: none; } #search p { margin: 0; font-size: 85%; } #searchinput { float: right; width: 174px; padding: 2px 5px; background: #679966 url(images/img11.gif) repeat-x; border: 1px solid #FFFFFF; font: bold 100% "Trebuchet MS", Arial, Helvetica, sans-serif; } #searchsubmit { float: right; margin-top: 5px; background: #679966 url(images/img12.gif) repeat-x; border: none; font: bold 100% "Trebuchet MS", Arial, Helvetica, sans-serif; color: #FFFFFF; } /* Footer */ #footer { height: 100px; } #footer p { margin: 0; line-height: normal; font-size: 85%; color: #000000; } #footer a { color: #000000; } Problem nr 1 http://www.flytillbrasilien.se/blieng/discovernatalbrazil.html the repeat just didn?t want to work why? several pages has the same problem and i got back the space at the footer again.... ans some aligment problems at the sides. Kind regards Derange (i do not like firefox now) Quote Link to comment Share on other sites More sharing options...
Andrea Posted January 4, 2009 Report Share Posted January 4, 2009 Firefox shows you what you wrote, while IE overlooks many mistakes and shows what it thinks you meant - a good website is written with a clean and validating (error free) code, so everything displays in the standard compliant browsers (like Firefox) the way it should - and then you use conditional comments to make things work in IE. I ran your page through the validator and it shows 1016 Errors. Fix those first and then take it from there. It's really NOT Firefox's fault :/ Quote Link to comment Share on other sites More sharing options...
derange Posted January 4, 2009 Author Report Share Posted January 4, 2009 well i buy that there is error in the html code but for now the problem is in the css code... last time i asked someone here i got god tips to add things in my css code to fix just margin errors and so on...... and then it all worked... so yes it is firefox that does not working as it should.... i do not want to rewrite everytning just for firefox.... Quote Link to comment Share on other sites More sharing options...
virtual Posted January 4, 2009 Report Share Posted January 4, 2009 It is not only in Firefox either, in Safari your background does not repeat properly. I looked at your code online and you are mixing tables, internal and external css. All your css styling should be in the external css stylesheet not in the html page. You probably have major conflict going on between the two. I also noticed you specified a height for one of your columns, this may be the cause of your problem in Firefox and Safari. You cannot afford to ignore the problem in these 2 browsers, at least 25% of people use Firefox. If you had developped your site using Firefox for testing, then you would be hating IE, like all the rest of us.... Good luck with your fix. Quote Link to comment Share on other sites More sharing options...
Andrea Posted January 4, 2009 Report Share Posted January 4, 2009 so yes it is firefox that does not working as it should.... i do not want to rewrite everytning just for firefox....If you say so.... Maybe evil Firefox takes the height settings Quote Link to comment Share on other sites More sharing options...
monkeysaurus Posted January 4, 2009 Report Share Posted January 4, 2009 FYI, it doesn't display correctly in Chrome or Opera either. Damn all those standards compliant browsers! If I were you, I'd rethink my approach. You'll be fighting the tide otherwise. Quote Link to comment Share on other sites More sharing options...
derange Posted January 4, 2009 Author Report Share Posted January 4, 2009 well i slimed down the css file some.... but still som problems... /** BASIC */ * { margin:0; padding:0; } body { margin: 0px 0px 0px 0px; background-image: url(images/blibackground.gif); } /** HEADER */ #header { margin: 0px auto; background: url(images/logga.gif); } /** MENU */ #menu { margin: 0px auto; background: url(images/img03.gif); } /** CONTENT */ #content { margin: 0px auto; background: url(images/img04.gif) repeat-y; } #columnA { float: right; } #columnB { float: left; width: 949px; padding: 0px 0px 0px 0px; } /** FOOTER */ #footer { width: 950px; margin: 0px auto; background: url(images/fot.gif); } what should i do to make it more simpel.... (not rewriting the entire page) Should i post everything in the html code? Quote Link to comment Share on other sites More sharing options...
Andrea Posted January 4, 2009 Report Share Posted January 4, 2009 You do realize that there is all kinds of INLINE CSS in your HTML which will override anything you put in your EXTERNAL stylesheet? Also * { margin:0; padding:0; } sets EVERY margin and padding to zero, so adding body { margin: 0px 0px 0px 0px; is redundant - aside from that, writing margin: 0; would be all you need here - the zero (or whatever number) automatically applies to all 4 sides, and since it's zero, no unit is needed, as 0 px is as much as 0em or 0%. Quote Link to comment Share on other sites More sharing options...
derange Posted January 4, 2009 Author Report Share Posted January 4, 2009 so might it work better now then? Quote Link to comment Share on other sites More sharing options...
derange Posted January 4, 2009 Author Report Share Posted January 4, 2009 http://www.flytillbrasilien.se/blieng/discovernatalbrazil.html with css /** BASIC */ * { margin:0; padding:0; } body { background-image: url(images/blibackground.gif); } /** HEADER */ #header { margin: 0 auto; background: url(images/logga.gif); } /** MENU */ #menu { margin: 0 auto; background: url(images/img03.gif); } /** CONTENT */ #content { margin: 0 auto; background: url(images/img04.gif) repeat-y; } #columnA { float: right; } /** FOOTER */ #footer { margin: 0 auto; background: url(images/fot.gif); } Quote Link to comment Share on other sites More sharing options...
Andrea Posted January 4, 2009 Report Share Posted January 4, 2009 Using the short forms doesn't actually make it work any better, just makes the code cleaner. You still have a mix of tables and divisions, missing closing tags, use of deprecated tags, and many other coding errors. Quote Link to comment Share on other sites More sharing options...
JBall Posted January 4, 2009 Report Share Posted January 4, 2009 Seems to render correctly now. You still have 675 Errors and 8 warnings. Mostly due to closing tags and missing "alt=" attributes (these are required) Don't get discouraged. Code is a very finicky thing. You have to follow the ground rules to the letter or things start to break. A good place to start would be removing the in line styles and adding those rules to your CSS. And adding the "alt=" attribute to your images. Many times correcting one thing will drastically lower the number of errors the validation finds. Quote Link to comment Share on other sites More sharing options...
Guest Morbid Andrew Posted January 5, 2009 Report Share Posted January 5, 2009 Wow, I'm scratching my head....this topic was in "beginners"! I'm dizzy! I have such a long ways to go! I'm so greeen at this! Quote Link to comment Share on other sites More sharing options...
derange Posted January 5, 2009 Author Report Share Posted January 5, 2009 well i have reduced the errors now but why dont the repeat-y work as it sholud in firefox??? if i use the quickfix and typing the px to get it to look good in firefox then i get a big white area at the end of the page in explorer..... Is the no way to get the repeat to work as is should? Quote Link to comment Share on other sites More sharing options...
Andrea Posted January 5, 2009 Report Share Posted January 5, 2009 Which image are you talking about? I see the orange/rose background that repeats x and y (with a very notifiable seam, btw) - and then I see the border to the right and left of your content, which repeats nicely unitl it reaches the height limit you have set in your inline styling. Is there some other image that should be repeating? Quote Link to comment Share on other sites More sharing options...
derange Posted January 5, 2009 Author Report Share Posted January 5, 2009 i have solved it i moved content height to the css file and put auto so now it is working perfect..... Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.