1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS questions with firefox

Discussion in 'CSS' started by pixelcommander, Dec 20, 2007.

0
  1. #1
    Hey all, I'm back... not that I've posted much on here but I've been given some advice and I'm doing well making my first table-less website. I'm having problems in firefox though, it's pretty obvious what the problem is. I have 2 divs in a container. one div is the main content that is floating left and the other is the small contact box that is floting right. The box on the right seems to be breaking out of my container div.

    that's my CSS

    and here is my page

    I'm also trying to figure out why it's coming with 7 errors when I validate it
     
    pixelcommander, Dec 20, 2007 IP
  2. pixelcommander

    pixelcommander Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    pixelcommander, Dec 20, 2007 IP
  3. blacknet

    blacknet Active Member

    Messages:
    709
    Likes Received:
    16
    Best Answers:
    2
    Trophy Points:
    70
    #3
    you right panel is floated right inside a panel that's not floated, thus float contentbak left and the background should fix itself :)

    ps: to center use auto margins.. margin:0 auto;
     
    blacknet, Dec 20, 2007 IP
  4. pixelcommander

    pixelcommander Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    pixelcommander, Dec 20, 2007 IP
  5. blacknet

    blacknet Active Member

    Messages:
    709
    Likes Received:
    16
    Best Answers:
    2
    Trophy Points:
    70
    #5
    swap the css for contentholder and contentbak :)
     
    blacknet, Dec 20, 2007 IP
  6. pixelcommander

    pixelcommander Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    pixelcommander, Dec 20, 2007 IP
  7. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I've got old FF... I don't see anything too weird looking. What do you want it to look like? Seems the same in my fake IE6 for Linux?

    Also, you can really compress your CSS by combining properties with shortcuts.

    Instead of margin-top: 0; margin-right: 0; etc, you can simply do margin: 0; and that's everything... margin: 10px auto; sets 10px for top and bottom, and auto (or whatever number you want) for the sides... or if they're all different: margin: 10px, 2px, 40px, 5px; The numbers always follow the order Top Right Bottom Left. You can do this with borders, backgrounds, fonts, an many others.

    Also, sometimes you're declaring something, and it's already default (like background-attatchment: scoll). Let the defaults do the work for you. Scroll is default so you don't have to mention it.. "fixed" is the attatchment some people change (doesn't scroll with the rest of the page). Watch out, IE pukes before IE7. Font-varient and weight are usually normal as defualt too, except with H#.

    You can do this:
    background: #405d6b url(../images/Content_BAK_TOP.jpg) left top repeat-x;
    font: normal 14px/16px "Trebuchet MS" Verdana sans-serif; (always set a few fallback fonts after the one you want, and finally serif, sans-serif or monospace at the end for people with like no fonts (like me).
    border: 1px solid #f00; or
    border-top: 1px solid #f00;
    border-bottom: 1px solid #f00; or
    border-width: 1px 0; (top and bottom are one pixel... sides are none).

    There's a great book with an appendix C in the back that I always use as a reference... tells you when you can use shortcuts, what goes with what properties etc. HTML Utopia: Designing Without Tables Using HTML and CSS by Rachel Andrew and Dan Shafer.

    And welcome back, pixel. I ended up setting your old thread as a bookmark. : )
     
    Stomme poes, Dec 21, 2007 IP
  8. pixelcommander

    pixelcommander Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    pixelcommander, Dec 21, 2007 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    Well let's see... axe the multiple H1's (if you have multiples, they should PROBABLY be H2's), axe the STUPID MALFING mm_onload image precache rubbish (shouldn't even be using .js for that anyways - that's what CSS is FOR), get rid of the line breaks that's what margins and padding are for, and I'd be worrying about fixing the page template before fixing the content... and I know it's in php, that's still no excuse not to format it properly to ease maintennance headaches - as evident by the code failing validation.

    If I have time later I'll see what I come up with. For now, this is probably ALL the HTML that you should need for that layout:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection" />

<title>Template</title>

</head><body>

<div id="container">

	<h1>Blue<b>Pixel</b><span></span></h1>

	<ul id="mainMenu">
		<li><a href="#">About BluePixel<span></span></a></li>
		<li><a href="#">Design Services<span></span></a></li>
		<li><a href="#">Marketing Services<span></span></a></li>
		<li><a href="#">Portfolio<span></span></a></li>
	</ul>

	<div id="content">

		<h2>What is <b>Blue<span>Pixel</span></b>?</h2>
		<p>
			BLUEPIXEL is a design firm based out of Chicago that specializes in 
			Multi-Media, Web and Graphic design. Our team is comprised of award 
			winning graphic designers, animators and web programmers. Together, 
			we have worked and consulted for the top design / development firms 
			in Chicago, and have provided experiences that surpass all of our 
			competitors. We make available to you award winning designs and 
			applications that leave an everlasting impression on anyone who 
			looks, learns and interacts with them.
		</p>
		
		<h2>WHAT DO I DO?</h2>
		<p>
			BLUEPIXEL specializes in creativity. If you want to stand out amongst
			the sea of competition, the best way to do it is with stunning 
			presentations that leave a lasting impression while allowing the user
			to have fun and interact with you. Anyone can make a website, but if
			you have a website that looks like it was homemade, users will skip
			right passed your site and move on. You deserve the best and that's
			all you can expect from us, THE BEST.
		</p>
		
		<h2>WHY CHOOSE ME?</h2>
		<p>
			We will provide you with the quality work that you would expect from a
			top design firm without having to deal with pushy salesmen, lazy 
			designers and unmet deadlines. We offer dedicated service and a 
			pleasant experience. Our creative minds come together to assist you
			in a way that no other company can. We provide the HIGHEST QUALITY
			designs and the MOST ADVANCED functionality you can get from one 
			company. You are the art director. You decide what is good and what
			isn't. If you are not experienced in art direction, we can be the 
			art director for you! Nothing is done until YOU say it is!
		<p>
		
	<!-- #content --></div>
	
	<div id="sideBar">

		<div class="boxTop"><div></div></div>

		<div class="boxContent quickLinks">
			<h2>Quick Links<span></span></h2>
			<ul>
				<li><a href="#">Request a Quote</a></li>
				<li><a href="#">Pricing and Specials</a></li>
				<li><a href="#">Send a Message</a></li>
				<li><a href="#">SEO Consulting</a></li>
				<li><a href="#">The <b>BLUE<span>PIXEL</span></b></a></li>
				<li><a href="#">My Print Portfolio</a></li>
			</ul>
		</div>

		<div class="boxContent latestProject">
			<h2>Latest Project<span></span></h2>
			<p>Coming Soon</p>
		</div>

		<div class="boxBottom"><div></div></div>

	<!-- #sideBar --></div>
	
<!-- #container --></div>

<div id="footer">Test footer</div>

</body></html>
    Code (markup):
    MAYBE an extra span or DIV in there somewhere, but for the most part that should be ALL you need... in other words less than HALF what you are using now.
     
    deathshadow, Dec 21, 2007 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #10
    and here it is:
    http://battletech.hopto.org/for_others/pixelcommander/bluepixel/template.html

    as always, the directory:
    http://battletech.hopto.org/for_others/pixelcommander/bluepixel

    is unlocked so you can grab the nasty bits - I remastered and recombined the images so the total is now 45k in 8 files intead of 64k in 18 files, meaning about 3-4 seconds load time saved for broadband users, and anywhere from 8-20 seconds chopped off dialup users download times. Validates XHTML 1.0 Strict, CSS would validate if not for the two FIREFOX hacks (which compensates for Firefux being a bit #DDD when it comes to the stupid background jog), it even passes WAI (except for the lack of metadata) and 508.

    I actually used a few less tags than the above html - I decided not to make #sideBar fluid width.
     
    deathshadow, Dec 21, 2007 IP
  11. pixelcommander

    pixelcommander Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    niiice

    thanks again

    I'm going to compare it to mine and study on why the changes were made. I think it will be easier for me, in my situation, to learn what I need to do different rather then learning CSS from front to back. I can pick up the slack when problems arise, I just need to get the basics down.
     
    pixelcommander, Dec 21, 2007 IP
  12. pixelcommander

    pixelcommander Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    those links go to the forilla records one from before
     
    pixelcommander, Dec 21, 2007 IP
  13. pixelcommander

    pixelcommander Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    i got them
     
    pixelcommander, Dec 21, 2007 IP
  14. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #14
    blueparukia, Dec 21, 2007 IP
  15. pixelcommander

    pixelcommander Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #15
    the only thing with the 1px images is that I have some noise in there so it needs to be about 20 wide, at least, but i can fix that
     
    pixelcommander, Dec 21, 2007 IP
  16. blacknet

    blacknet Active Member

    Messages:
    709
    Likes Received:
    16
    Best Answers:
    2
    Trophy Points:
    70
    #16
    add bg to both contentholder and contentbak :) and sorry mate I'm real busy at mo!
     
    blacknet, Dec 21, 2007 IP
  17. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #17
    That noise was below the luminance threshold, which is why I got rid of it. Wasted bandwidth that nobody can actually see... (honestly though, I thought it was .jpg artifacting - which is why I avoid .jpg for non-photo graphics like the plague)

    unless they are on a shit LCD that can only display 18 bit color - like say those mislabelled Macbook pro's Apple ripped off buyers on.

    and sorry about the confusion - I briefly accidentally uploaded the wrong html/css over the correct one... It was only wrong for about 30 seconds, must have been the 30 seconds you first accessed it by.
     
    deathshadow, Dec 21, 2007 IP
  18. buckmajor

    buckmajor Active Member

    Messages:
    574
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #18
    D always has a solution for CSS ;)

    Your the man D

    CHEERS :)
     
    buckmajor, Dec 21, 2007 IP