• Page rendering problem drives me beserk.
    11 replies, posted
So I thought I'd try and do some web development again, though I'm a bit of a noob. I thought I'd create a general purpose site for my creations and anything that I want to put on there. There are problems though. [url]www.jallenbah.co.uk[/url] How it should look (and how it renders in firefox, opera and IE): [img]http://imgkk.com/i/dE9rzp.png[/img] How it looks in chrome -.- [img]http://imgkk.com/i/_dVJBB.png[/img] Links aren't working yet because I'm just working on the structure of the page before I go adding stuff. How should I be doing this? [code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <LINK REL=StyleSheet HREF="mainStyle.css" TYPE="text/css" MEDIA=screen> <title>Jallen's Stuff - Home</title> </head> <body> <div id="container"> <div id="banner"> <img src="img/title.png" /> </div> <div class="spacer"></div> <div id="main"> <span id="sections"> <a href="http://jallenbah.co.uk/index.html">Home</a><br /> <a href="http://jallenbah.co.uk/about.html">About</a><br /> <a href="http://jallenbah.co.uk/contact.html">Contact</a><br /> <hr /> <a href="http://jallenbah.co.uk/dev.html">Game / Software Development</a><br /> <a href="http://jallenbah.co.uk/contentdev.html">Game Content Development</a><br /> <a href="http://jallenbah.co.uk/fish.html">Aquariums and Fishkeeping</a><br /> <hr /> <a href="http://jallenbah.co.uk/forum">The Forums</a><br /> <a href="http://youtube.com/jallenbah">My Youtube Page</a><br /> </span> <span id="content"> DIE CASCADING STYLE SHEET DIE DIE aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </span> </div> </div> </body> </html>[/code] [code]body{ background: #000000 url('img/bg.gif') repeat-x scroll 0 0 } #container{ margin-left: auto; margin-right: auto; padding: 0px; width: 800px; } .spacer{ height: 4px; } #banner{ width: 786px; height: 60px; background-image: url('img/headerbg.gif'); border: 1px solid #CCCCCC; padding: 7px; color: #FFAA00; font-family: Verdana, sans-serif; font-size: 36px; position: relative; } #main{ width: 786px; background-color: #303030; color: #EEEEEE; border: 1px solid #CCCCCC; margin-left: auto; margin-right: auto; padding: 7px; font-family: Verdana, sans-serif; font-size: 11px; position: relative; } #sections{ width: 200px; padding: 5px; border: 1px solid #CCCCCC; display: inline-table; } #content{ width: 300px; padding: 5px; border: 1px solid #CCCCCC; display: inline-table; } a:link{ color: #FFDD00; text-decoration: none; } a:visited{ color: #FFDD00; text-decoration: none; } a:hover{ color: #FF9900; text-decoration: none; }[/code] Also, any other recommendations for code improvement while I'm here asking this? Thanks.
I wish I could do all of this :(. Where are you learning?
I just use divs loads and slap css properties on them :D I just give each div an id, or class if it's something which will be used more than once, then I just google how to do something, like "position div css" and look through the results. When I find something that looks useful like when I found the "display" property when trying to hide stuff, I google that property ("display property css") which gives me the official reference (i think) - [url]http://www.w3schools.com/css/pr_class_display.asp[/url] That gives you a list of all the stuff it can be set to, then I just play around with all the things it could be that look like they will work until I get the desired effect on every browser. As well as this if I have a particular design in mind or some kind of alignment or positioning, I try and find the most simple site possible which uses that and then look at the sources in firebug (which is awesome) then tweak it and stuff until it looks how I want. Anyone got any ideas on how I can get a cross browser solution with the desired effect? :(
I think it might be because you are using auto as the margin, which I'm guessing will be different in some browsers. How do you get the white square that terminates at the end of your text?
[QUOTE=nos217;16600765]I think it might be because you are using auto as the margin, which I'm guessing will be different in some browsers. How do you get the white square that terminates at the end of your text?[/QUOTE] In the HTML file: [code]<div id="content">I'm in<br /> a white box<br /> which terminates<br /> when this text<br /> finishes.[/code] In the css file: [code]#content{ width: 300px; padding: 5px; border: 1px solid #CCCCCC; background-color: #303030; display: inline-table; }[/code] So #content has all the properties which will be applied to the element with id="content". - The width is the width of the box, don't specify a width if you want it auto sized by the text. - The padding is like a gap between the edge of the box and the text, making this box 310px wide (300px width + 5px padding on each side) - For the border bit... #CCCCCC is the light grey of the lines on the box, solid means not dashed or whatever, 1px is how thick the line is. - Background colour speaks for itself. Remember American spelling. - The display property can be used to hide elements or make them line up differently or whatever. By default, div's have a <br /> before and after them. By specifying inline-table I have made it not do this. Inline just screws it up irritatingly, remember to search the property followed by css on google to look at all of the values it can take. If you want to be evil and put it all in the html file then just do... [code]<div id="content" style="width: 300px;padding: 5px;border: 1px solid #CCCCCC;display: inline-table;background-color: #303030;"> I'm in<br /> a white box<br /> which terminates<br /> when this text<br /> finishes.</div>[/code] Also I don't think it is to do with the auto margin because I'm only dealing with left / right margins. Also that's being used on the main container div and not the content div which is inside main, which is inside container... Also, auto on left and right just smacks it in the middle. Guys need help :frown:
Thank you so much :). You wrote all of that for me :O. I'm sorry it didn't work :(.
[QUOTE=nos217;16601395]Thank you so much :). You wrote all of that for me :O. I'm sorry it didn't work :(.[/QUOTE] Wha? The code I just did didn't work? [code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> </head> <body style="background-color:#303030;"> <div id="content" style="width: 300px;padding: 5px;border: 1px solid #CCCCCC;display: inline-table;background-color: #303030;color:#CCCCCC;"> <font face="Tahoma" size="2"> I'm in<br /> a white box<br /> which terminates<br /> when this text<br /> finishes.</div> </font> </body> </html>[/code] That works for sure. Unless you are talking about the margin thing. Also no problem. My 8800GT isn't working because my motherboard PCI-E slot is broken :frown: Which means I'm using an on board 6150LE and spend all of my time going through thunderf00t videos on youtube and lurking forums.
I mean your margin thing. I can't try your suggestion just yet, I'm about to go out for a bit. I'll try it later. Ughh, I know what you mean. Then you end up getting so bored you keep refreshing the forum in the hope that something interesting happens. Thanks again, and good luck with the margin.
Try commenting out the position:relative in #main. It might not help, but there's no point in having it if you don't specify down:, left:, top:, and bottom: attributes.
[QUOTE=Kat of Night;16601761]Try commenting out the position:relative in #main. It might not help, but there's no point in having it if you don't specify down:, left:, top:, and bottom: attributes.[/QUOTE] Well, it didn't do anything so I may as well remove it. It's probably just there from when I was playing with the layout before. Does nobody have a solution? D: [highlight]SOLUTION!!11!1!1!!111!!![/highlight] I honestly have stopped caring about how "correct" this page is now since the platforms I'm writing it for seem so quirky anyway. [code].vspacer{ padding: 2px; float: left; display: inline-table; }[/code] [code] <div id="sections"> <a href="http://jallenbah.co.uk/index.html">Home</a><br /> <a href="http://jallenbah.co.uk/about.html">About</a><br /> <a href="http://jallenbah.co.uk/contact.html">Contact</a><br /> <hr /> <a href="http://jallenbah.co.uk/dev.html">Game / Software Development</a><br /> <a href="http://jallenbah.co.uk/contentdev.html">Game Content Development</a><br /> <a href="http://jallenbah.co.uk/fish.html">Aquariums and Fishkeeping</a><br /> <hr /> <a href="http://jallenbah.co.uk/forum">The Forums</a><br /> <a href="http://youtube.com/jallenbah">My Youtube Page</a><br /> </div> [B]<div class="vspacer">&nbsp;</div>[/B] <div id="content"> This solution is stupid and funny. aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div>[/code]
[QUOTE=Jallen;16600997] - The display property can be used to hide elements or make them line up differently or whatever. By default, div's have a <br /> before and after them. By specifying inline-table I have made it not do this. Inline just screws it up irritatingly, remember to search the property followed by css on google to look at all of the values it can take.[/QUOTE] This is probably your problem. They don't have line breaks, they just stack. Try the float:left property instead. Using table attributes causes weird shit like this.
[QUOTE=Catdaemon;16602218]This is probably your problem. They don't have line breaks, they just stack. Try the float:left property instead. Using table attributes causes weird shit like this.[/QUOTE] That was my solution :D
Sorry, you need to Log In to post a reply to this thread.