CSS inconsistencies - Developers

Sorry I've made like 4 threads in 2 days but I'm stupid and willing to learn from the best [/kissass] I can't for the life of me figure out why the "random text" that appears under the logo @ the upper left hand corner of the screen seems to be at a different position between these two pages even though they share the exact same template file. [url]http://almost-there.org[/url] [url]http://almost-there.org/forums/[/url]

the logo images could be different sizes

The top part is the logo, it consists of a <img> tag that is imported from /templates/sharky.php [url]http://almost-there.org[/url] [url]http://almost-there.org/forums/[/url] Both share the same template file and thus the same <img> tag [url]http://www.almost-there.org/images/logos/logo.png[/url] [html]  <script type="text/javascript" src="/files/scripts/wave4.js"></script> <p class="versionText">Sharky Version 2.75 by LuckyMonkey</p> <canvas id="ripple">Almost There</canvas> <div id="ripple-control"> <img class="logoPlacement" alt="Almost There" src="/images/logos/rotate.php" width="400" height="70"/> <p class="tf2Medium" style="z-index:+2;position:absolute;top:80px;left:60px;color:#2481C1;font-weight:900;text-align:left;"> <?php include("header.php"); ?></p> <ul id="topnav"> <li><a href="/forums/">Forums</a></li> <li><a href="/fridge/">Fridge</span></a></li> <li><a href="/irc.php">IRC</a></li> <li><a href="/servers.php">Servers<sup style="font-size:10px;color:#CCCCCC;">(Beta)</sup></a></li> <li><a href="/gadgets.php">Gadgets<sup style="font-size:10px;color:#CCCCCC;">(Beta)</sup></a></li> <li><a href="/steam.php">Steam</a></li> </ul> </div><br /><br />  [/html] The text underneath that logo <img> tag is what is getting messed up which means there is something in CSS on the forums that is making it look different, something that doesn't exist on the [url]http://almost-there.org[/url] page

The big "log in now" box is knocking everything out of alignment.

[QUOTE=Lexic;33920790]The big "log in now" box is knocking everything out of alignment.[/QUOTE] Can you show me? I have it on a separate z-index so I didn't think it would collide with anything. Are there any changes I can make?

[QUOTE=lkymky;33920843]Can you show me? I have it on a separate z-index so I didn't think it would collide with anything. Are there any changes I can make?[/QUOTE] z index doesn't work like that. try positioning it absolutely

absolutely I love your position on this [/lame] [editline]27th December 2011[/editline] hmm it seems that it already is positioned as such ( [URL]http://almost-there.org/forums/cache/themes/theme4/global.css[/URL] ) [code] #panel { background: url("../../../images/forumSharky/wb_bg.png") repeat scroll 0 0 transparent; color: #FFFFFF; float: right; font-family: sans-serif; font-size: 12px; height: 80px; margin: 20px 0 8px 8px; min-width: 310px; padding: 10px; position: absolute; right: 0; text-align: left; top: 18px; z-index: 1; } [/code] inline styling on [URL]http://almost-there.org[/URL] for the text [code] <img class="logoPlacement" height="70" width="400" src="/images/logos/rotate.php" alt="Almost There"> <p class="tf2Medium" style="z-index:+2;position:absolute;top:80px;left:60px;color:#2481C1;font-weight:900;text-align:left;"> WE MASH OUR PENISES TOGETHER MONTHLY, COME JOIN <br> THE FUN! </p> [/code] [editline]27th December 2011[/editline] it also seems when I apply a display:none; to the panel nothing changes Panel being the "login now" box

On the forums, there is a CSS declaration (global.css:25) of [code]* { margin:0; }[/code] Which is throwing the element out of position. Try changing the margin of the forum page to "margin:1em 0;". Also, there is a line-height declaration (global.css:1) in body setting it to 1.4. This could also throw the positioning off a tad.

This: [code]* { margin:0; }[/code] Don't do it. Browsers actually come with a lot of very sensible defaults, that just fucks it all up and introduces a slew of problems. If you happen to have a fair amount of elements on the page, this can also strain older computers.

[QUOTE=StinkyJoe;33932036]Browsers actually come with a lot of very sensible defaults[/QUOTE] It's a pity they aren't consistent between all browsers.

[QUOTE=Dragory;33932510]It's a pity they aren't consistent between all browsers.[/QUOTE] It's not an issue when you finally understand websites don't have to look 100% the same between all browsers and devices - phew, what a weight off your shoulders that is! [url=http://paulirish.com/2011/tiered-adaptive-front-end-experiences/]Paul Irish - Tiered, Adaptive Front-end Experiences[/url] Use a sensible, modern CSS reset, and stop focusing on absolute consistency - there's no such thing.

[QUOTE=StinkyJoe;33932526]It's not an issue when you finally understand websites don't have to look 100% the same between all browsers and devices - phew, what a weight off your shoulders that is! [url=http://paulirish.com/2011/tiered-adaptive-front-end-experiences/]Paul Irish - Tiered, Adaptive Front-end Experiences[/url] Use a sensible, modern CSS reset, and stop focusing on absolute consistency - there's no such thing.[/QUOTE] Don't CSS resets pretty much aim at removing those inconsistencies? I usually try to get my websites to look almost the same on modern browsers and possibly their slightly earlier versions (e.g. IE8). [editline]28th December 2011[/editline] But you're right that websites don't have to look 100% the same, and I like the TV comparison on that site you linked.

[QUOTE=Dragory;33932582]Don't CSS resets pretty much aim at removing those inconsistencies? I usually try to get my websites to look almost the same on modern browsers and possibly their slightly earlier versions (e.g. IE8). [editline]28th December 2011[/editline] But you're right that websites don't have to look 100% the same, and I like the TV comparison on that site you linked.[/QUOTE] They initially started out as exactly that, yes! These days however, the most popular CSS resets would be most aptly named as CSS frameworks or boilerplate, since they not only attempt to pad out differences, but also implement common features and lay down the ground work for things like mobile and print declarations. To clarify my point, I'm not against the idea of making a website look the same across all browsers, it's just not something worth losing any sleep over.

[QUOTE=StinkyJoe;33933069]They initially started out as exactly that, yes! These days however, the most popular CSS resets would be most aptly named as CSS frameworks or boilerplate, since they not only attempt to pad out differences, but also implement common features and lay down the ground work for things like mobile and print declarations. To clarify my point, I'm not against the idea of making a website look the same across all browsers, it's just not something worth losing any sleep over.[/QUOTE] Right. Could you recommend some modern CSS reset? I've been using Reset Reloaded from quite some time ago and I'm not sure if it's really up to date.

[QUOTE=Dragory;33934672]Right. Could you recommend some modern CSS reset? I've been using Reset Reloaded from quite some time ago and I'm not sure if it's really up to date.[/QUOTE] I usually tweak one of these to fit my needs: [url]http://html5reset.org/[/url] [url]http://html5boilerplate.com/[/url] (just the CSS portion) [url]http://meyerweb.com/eric/tools/css/reset/[/url]

Add a [b]margin:0[/b] to the style of the "Random text", like this: [code]<p class="tf2Medium" style="margin:0;z-index:+2;position:absolute;top: 80px;left:60px;color:#2481C1;font-weight:900;text-align:left;"> WANNA PLAY HIDE AND SEEK? WE DON'T</p>[/code] or to the [b].tf2Medium[/b] class, like this: [code]tf2Medium { font-size: 24px; margin: 0; }[/code]

[QUOTE=xmariusx;33937957]Add a [b]margin:0[/b] to the style of the "Random text", like this: [code]<p class="tf2Medium" style="margin:0;z-index:+2;position:absolute;top: 80px;left:60px;color:#2481C1;font-weight:900;text-align:left;"> WANNA PLAY HIDE AND SEEK? WE DON'T</p>[/code] or to the [b].tf2Medium[/[b] class, like this: [code]tf2Medium { font-size: 24px; margin: 0; }[/code][/QUOTE] Haha! Thanks that fixed it, I fucking <3 this board.