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.

firefox messes up all my sites, i borderline hate that broswer

Discussion in 'CSS' started by pixelcommander, Aug 6, 2007.

  1. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    434
    Best Answers:
    0
    Trophy Points:
    0
    #41
    I take it you're more of a designer than a coder then? (Yes, I'm still trying to figure out how comfortable you are with semantic markup before I recommend anything.)
    SEMrush
    Oh, and I'm going to say this now before someone "offers" their "services" - don't accept them. You're dealing with two world-class Web developers who are offering you advice for free (and in the case of Jason's redesign, the best damn code in the world).
     
    Dan Schulz, Aug 8, 2007 IP
    SEMrush
  2. pixelcommander

    pixelcommander Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #42
    ha, i hope no one offers me their services, i'm a one man army. i do GREATLY appreciate your help and more-so your tone. i was about to write this board off as some kind of elitist "we're all better then you" board but you 2 changed my mind. i'm getting a few other friends to join as well, they'll have GREAT input and they have too much time on their hands so i think they can make a great addition to the community here. i'm a whiz at photoshop and swishmax so if i can help you in any way i'd be more then happy to.

    as far as reccommending things goes, anything at a beginner level would be best. i'm not sure i can dive into things 100% at the moment but anything that would cover the basics would be good. i've tried searching the net but it seems like everyone has their own way of doing things and it's confusing as what's better then the other.
     
    pixelcommander, Aug 8, 2007 IP
  3. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    434
    Best Answers:
    0
    Trophy Points:
    0
    #43
    This place is far from elitist. Mercenary (kudios to Jason for coining that catch-phrase for this site) is far more like it.

    If you really want good advice over the long term though, head over to www.sitepoint.com/forums/ (I'm a Mentor on the Design Team there). Jason will say they're elitist, and to an extent that is true (but for the most part not the "holier than thou" type, but more like widely recognized experts in their fields, like the Zeldmans and Meyers of the Web), but that has to do more with advocating best practices and separating the truth from the lies than anything (though it does have its share of extremists and zealots, but I won't name names, and besides, what forum doesn't have them in the first place?). The community is also wonderful, with a mix of business, Web design, development, programming and writing experts along with hobbyists who just love doing what they do because they enjoy it. I will give them credit though, for the most part they have ALL been collectively well ahead of the curve and right on controversial issues far more often than not, which speaks for itself.

    The first thing I'm going to suggest are a trio of books (depending on your skill level in HTML, that is). The first is Designing With Web Standards, 2nd Edition by Jeffrey Zeldman [zeldman.com]. The second is Don't Make Me Think! A Common Sense Approach to Web Usability, 2nd Edition by Steve Krug [sensible.com]. These aren't so much technical books as they are masterpieces in Web standards and common sense. Consider these two books to be the "bridge" between the old-fashioned way of coding and the new, improved way of coding. I'd read these while working on your current projects or in your spare time. They don't deal with HTML, CSS or anything like that, so you don't have to worry about (re)learning how to code just yet. The third book I recommend (ok, time for the bait and switch) actually depends on how strong your coding skills are. If you're not very strong with clean, minimal, semantic and valid (X)HTML, then I suggest you read Build Your Own Web Site The Right Way Using HTML & CSS by Ian Lloyd [sitepoint.com]. If you at least know the basics (what a heading, paragraph, unordered list and so forth are for example) but want to learn how to take this boring unstyled markup and make it look like a million bucks, then HTML Utopia: Designing Without Tables Using CSS, 2nd Edition by Rachel Andrew & Dan Shafer [sitepoint.com].

    I'm also linking you to some wonderful Web sites/pages that will help keep you on the straight and narrow path. I don't want to burden you with Web design best practices, so feel free to ask me when you need to and I'll show you how to get around whatever problem you're having. These links are to help you get started and keep you in the proper frame of mind.

    Required Reading
    Domain Warning [domainwarning.com]
    Firefox Myths [mywebpages.comcast.net]
    I Wish I Had Written This [no-spec.com]
    Six Ways to Write More Comprehensive Code [ibm.com]
    Web browser standards support [webdevout.net]
    Web Design Contracts- Why Bother? [digital-web.com]
    Why We Won't Help You [diveintomark.org]

    Web Accessibility & Usability
    Free Screen Readers [access.benjaminhawkeslewis.com]
    Involving Users in Web Accessibility Evaluation [w3.org]
    Making Compact Forms More Accessible [alistapart.com]
    Section 508 - The Road to Accessibility [section508.gov]

    Browsers
    Apple Safari (Windows and Mac OS X) [apple.com]
    IEs 4 Linux (Linux) [tatanka.com.br]
    Installing Multiple Copies of Internet Explorer [tredosoft.com]
    Running Internet Explorer 7 as a Standalone [tredosoft.com]
    Mozilla Firefox [firefox.com]
    Opera Web Browser [opera.com] - HIGHLY RECOMMENDED BY JASON AND MYSELF
    Taming Your Multiple IE Standalones [positioniseverything.net]

    Browser Extensions
    Internet Explorer Developer Toolbar [microsoft.com]
    Web Developer Toolbar (Firefox) [addons.mozilla.org]
    Web Developer Toolbar (Opera) [operawiki.info]

    Online Services
    28k and 56k Modem Emulator [ilovejackdaniels.com]
    iPhone Tester [iphonetester.com]
    Opera Mini 4 Beta Simulator [operamini.com]
    Pixel to EM Calculator [riddle.pl]

    Bear in mind there's a LOT more avaialble should you need it, but this should hopefully cover the basics. There's one more resource that I'm going to recommend, but it hasn't launched yet. Jason and I are working on building a Web design magazine/resource/tutorial site that will advocate best practices in clean, minimal, semantic and valid markup (and whatever else fancies us later on, such as image optimization with CSS and unobtrusive, accessible JavaScript, or even secure PHP coding) called Minimal Markup [minimalmarkup.com]. Keep your eyes peeled for when it launches (hopefully later this month or early next month). :cool:
     
    Dan Schulz, Aug 8, 2007 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #44
    Pick one of the projects you're most looking foreward to, and use that for practise. That way you're spending time doing the work but learning too.

    These two crusty old guys (ok, Dan's not old...) as well as a few others (kr5st or whatever Gary's name is) on here are real sticklers for coding the "right" way and they know all this stuff and why this and why that. I started reading this forum in February knowing only that html was something you use to write websites... (I was hired to make the pretty (designs/pictures) for the old crappy website, but I couldn't even see it in Fire Fox, so I thought, can I learn enough to redo the site??) and found both good and bad advice on here, but best is that someone asks, "I want to do this and that, how do I do it?" and someone either has the code or links to a website with a tutorial on some cool effect or so. Dan hypes this book, "Build Your Own Website the right way using HTML and CSS" by Ian Lloyd and while I'm only halfway through it, it's already answered a ton of questions I've had (though it makes more).

    deathshadow's also redone several other people's sites here (like with yours) if you dig through the forums, saying why this and why that. They're nice to see because the sites are all so different.

    Ooh, Dan posted while I was typing. The Don't Make Me Think book is not only great, it's small. You can read it in like an hour or less, so I know anyone can squeeze it into a busy schedule (I read it on the train to and from work for a week, only a 15-min ride each way).
     
    Stomme poes, Aug 9, 2007 IP
  5. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    434
    Best Answers:
    0
    Trophy Points:
    0
    #45
    More like I posted this a few hours ago, actually.
     
    Dan Schulz, Aug 9, 2007 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #46
    Maybe I have lag... there were only 2 pages on this thread when I started typing...

    The Opera site has text before the Doctype. Doesn't that screw up IE?
     
    Stomme poes, Aug 9, 2007 IP
  7. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    434
    Best Answers:
    0
    Trophy Points:
    0
    #47
    You mean <?xml version="1.0" encoding="utf-8"?> by any chance? Yeah, that'll throw IE 6 into quirks mode.

    Jason's been through the whole tirade against Opera for that for a while now. You want to talk about bone-headed, take it up with him. Just be prepared to get a new CensorTron (content filter) when you're done because he'll drop more F-bombs than the US Army goes through munitions in a single year (during peace time).
     
    Dan Schulz, Aug 9, 2007 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #48
    If that includes more gems like "Firefux", it's worth it.
     
    Stomme poes, Aug 9, 2007 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,157
    Likes Received:
    1,708
    Best Answers:
    239
    Trophy Points:
    515
    #49
    Alright, sorry for the delay but on to the CSS. Now, there's a LOT of absolute positioning in here which you'll often see me say is 'bad', but that's because I am NOT using absolute positioning for LAYOUT. It is being used inside relative positioned containers of the same size - as such 'flow' is preserved.

    As I work on the page, I have 'points' at which I check the results in all four browser engines - I will mark those points as *** REFRESH ***

    There are a few things I always set at the start of any CSS

    First, we null all margins and padding with the universal selector.

    * {
    margin:0;
    padding:0;
    }

    Then we set up our table behavior so all that cellpadding/cellspacing nonsense is unneeded.

    table {
    border-collapse:collapse;
    }

    and let's yank the border around images too.

    img {
    border:none;
    }

    This is a 100% height layout - to do that we need to set height:100% on body and HTML. Height on body and HTML is always treated as min-height, so this is a easy one-stop hit.

    body, html {
    height:100%;
    }

    Next we set our font appearance, color and background - notice I include several fallbacks just in case our desired fonts are unavailable. Your original only declared trebuchet MS - not everyone is running windows and it's good practice to ALWAYS include a fallback.

    body {
    color:#FFF;
    background:#000;
    text-align:center; /* center in IE 5.x */
    font:normal 80%/120% "Trebuchet MS",arial,helvetica,sans-serif;
    }

    I also include text-align:center since this is a fixed width layout that we want centered - Since we aren't in quirks mode the only browser that pays this attention is IE 5.x.

    Next is the container. We set our fixed width, a min-height of 100%, margin:0 auto; to center it in the display on all 'standards compliant' browsers, and text-align:left so we get normal alignment of elements inside the container instead of the center alignment we declared on the body.

    We also have to 'fix' the fact that IE6 and earlier don't have min-height, simple html * hack gives us that.

    html * #container {
    height:100%;
    }

    Next up is the header. First we design the h1 to appear 'nice' the same size as our image without the image.
    h1 {
    width:782px;
    height:83px;
    padding:18px 0;
    background:#700;
    position:relative;
    text-align:center;
    font:bold 48px/54px arial,helvetica,sans-serif;
    }

    h1 em {
    display:block;
    font:bold 24px/28px arial,helvetica,sans-serif;
    }

    *** REFRESH ***

    83px+18px+18px=119px, our image height. Setting the EM to display:block puts it on it's own line - and decreasing the font gives us a nice appearance of header and sub-header while keeping both inside the h1 tag. (as there is NO reason that text should go in a H2 or other tag). We also set position:relative which allows us to use absolute positioning on our span.

    The span gets the full dimensions of the image, and is positioned in the upper left corner of the containing h1. position:absolute forces display:block, so we don't have to set that manually.

    h1 span {
    width:782px;
    height:119px;
    position:absolute;
    top:0;
    left:0;
    background:url(images/logo.jpg) top left no-repeat;
    }

    *** REFRESH ***

    Which finishes off the header. On to the menu where we remove the list styling, pad it on one side to push the first of our menu options in, and here's the cute part - first off we combine the entire header down to a single image:

    [​IMG]

    Then we slap that image as the background of the menu. We will also set position:relative to change the sort order - we'll get into that when we get to the #middle table.

    #menu {
    list-style:none;
    padding-left:91px;
    height:48px;
    position:relative;
    background:#600 url(images/navigation.jpg) top left no-repeat;
    font:bold 14px/48px arial,helvetica,sans-serif;
    }

    *** REFRESH ***

    Notice we also set the font line-height to the same as our UL height - this will center the text behind our images.

    We will be floating all the anchors to let us set their height and width - IE flakes out on this, particularly IE7 which will float them, but make them 'trail down' the page... By floating the anchor but setting the LI to display:inline - somehow it works in all browsers. This setting doesn't make a lot of sense, but if it works, we use it. We will also once again set position:relative to allow absolute positioning of our images within the anchor.

    #menu li {
    display:inline; /* minor IE7 fix */
    }

    #menu a {
    float:left;
    height:48px;
    text-align:center;
    color:#FCB;
    position:relative;
    background:#600;
    }

    #menu li a:hover,
    #menu li a:focus,
    #menu li a:active {
    color:#FFF; /* stupid IE fix */
    background:#700;
    }

    *** REFRESH ***

    Yes, we set some colors here - this way when the images are off we have something pretty to look at. The hover state also NEEDS to have a color set for IE, otherwise when we get to our images that we store in the SPAN's they will 'stick' in the hover state. Setting the color for hover makes IE not do that.

    Now for the span and individual buttons.

    #menu a span {
    display:block;
    height:49px;
    position:absolute;
    top:0px;
    left:0px;
    background:url(images/navigation.jpg) no-repeat;
    }

    Fairly simple here. Display:block so we can set dimensions on it, and absolute position it in the upper left corner of the anchor right over our text. You'll notice we are assigning the same background image to all our spans - since this image is already loaded that's several less handshakes with the server. Instead of needing 12 separate images, we are doing this entire section with just the one.

    To that end, we need to set the individual widths and 'slide' the background into position to only show the buttons we want... and we need to set hover states that slide the background up.

    #menu .menu_home,
    #menu .menu_home span {
    width:89px;
    background-position:-91px -0px;
    }

    #menu .menu_home:active span,
    #menu .menu_home:focus span,
    #menu .menu_home:hover span {
    background-position:-91px -52px;
    }

    #menu .menu_artists,
    #menu .menu_artists span {
    width:126px;
    background-position:-180px 0;
    }

    #menu .menu_artists:active span,
    #menu .menu_artists:focus span,
    #menu .menu_artists:hover span {
    background-position:-180px -52px;
    }

    etc, etc, etc.

    *** REFRESH ***

    Notice I overpadded the image to 52px tall - this prevents jpg artifacting from showing up on our 'normal' state making a thin black bar at the bottom of our menu. If we were using .png or .gif we'd not have that problem, but there's just too much color depth to do so in a reasonable filesize.

    On to our two columns. To keep it simple we'll use a table, which makes doing our 100% height model MUCH easier as well. We set the width and height to 100%, which would normally make the page more than screen height since we're already pushed down 167px by the header and menu, but by adding a negative top-margin we can slide the table up over the header... but we don't want it over, we want it under. Remember above where I set the menu to position:relative? Well, relative elements render atop non-relative ones, so we're already set for the table to appear under instead of over.

    We also can apply our background-image... I had to 'play' with it to get it to line up right, and found that 162px looked better than 167. This works better than applying it to the body because you don't get the odd 'pixel jog' as you change the screen width. Lining up a centered body background with a centered element never quite works as advertised.

    #middle {
    margin-top:-167px;
    width:100%;
    height:100%;
    background:url(images/pageback.jpg) 0 162px repeat-y;
    }

    Now there's a minor 'quirk' in lte IE6 in regards to the table that makes it render slightly taller than it should at 100% giving us a one px scrollbar - to avoid this we can tell IE6 and earlier to use 99.9% instead, which still fills the screen. (incorrectly BTW).

    * html #middle {
    height:99.9%; /* lte IE6 has it's head up it's ass - again */
    }

    Know how usually you have to set align="left" and valign="top" on all TD's to get that behavior? We've got CSS, we can get rid of all of those with one simple declaration.

    #middle td {
    vertical-align:top;
    text-align:left;
    }

    Next up is to format each column. Because we rode the top of the table up under the header, we need to pad the content down the same amount - I added ten extra pixels padding for a quick little 'margin'. The 'sidebar' also needs left padding to clear our background, and the content area needs right padding for the same reason. I use a bit less padding on that side because there's a bit less image on that side. #sidebar gets a width set, #content gets left alone so it will expand to fit the available area.

    #sidebar {
    width:233px;
    padding:177px 0 74px 96px;
    }

    #content {
    padding:177px 76px 74px 20px;
    }

    *** REFRESH ***

    On to the content of #sidebar. First up is the .artists_box - because our column is set to the same 233px width, we don't have to declare that as a div auto-expands to the width of it's parent container. Applying the styling here is a touch different as we are going to put the footer image on the container itself - this way we don't need any extra HTML for it. Just pad the bottom the height of the image, and put the image in bottom left. Then our 'tiled' background can be applied to the tags inside it - P, UL and H2. P and UL also get some padding to space them apart and to clear the background image.

    .artists_box {
    padding-bottom:27px;
    background:url(images/btm2.png) bottom left no-repeat;
    }

    .artists_box p,
    .artists_box ul,
    .artists_box h2 {
    color:#000;
    background:#FFF url(images/back.gif) top left repeat-y;
    }

    .artists_box p,
    .artists_box ul {
    padding:8px 16px;
    }

    Since we have two header2 tags that will share appearance and spacings when images are off, we can set those now.

    .artists_box h2 {
    clear:both;
    font:bold 16px/21px arial,helvetica,sans-serif;
    overflow:hidden;
    text-align:center;
    position:relative;
    }

    The clear:both will remove floats - handy since we are about to use some shortly. Adding position:relative allows us to again do image-replacement.

    .artists_box h2 span {
    position:absolute;
    top:0;
    left:0;
    }

    Each one has different heights, first up is the .artists section

    .artists_box .artists {
    line-height:42px;
    height:42px;
    }

    .artists_box .artists span {
    width:233px;
    height:42px;
    background:url(images/topers.jpg) no-repeat;
    }

    *** REFRESH ***

    The line-height will center our single line of text top to bottom inside the height, and the span is just a quick and easy width/height/background. That span picks up all the properties of the above h2 span.

    The news box is similar but requires a bit fancier layout since it does NOT span the entire width, being a much smaller entity. We have to apply that same padding to the span as top and left position.

    .artists_box .news {
    width:181px;
    padding:8px 37px 8px 15px;
    height:21px;
    }

    .artists_box .news span {
    top:8px;
    left:15px;
    width:181px;
    height:21px;
    background:url(images/news.png) no-repeat;
    }

    *** REFRESH ***

    Now for the actual list of artists. You want those as two columns and we assigned background-images to them in the html (letting you dynamic them in the php as desired). Again we remove the list style, apply padding to get the content clear of the background, and in this case set a width. By applying float:left to the UL, it will pay attention to the heights of floats inside it. As above we set the LI to display:inline, and use the anchors as our floated blocks.

    .artists_box ul {
    width:209px;
    float:left;
    padding-right:8px;
    list-style:none;
    }

    .artists_box li {
    display:inline;
    }

    .artists_box a {
    float:left;
    width:68px;
    height:30px;
    padding:2px 0 2px 32px;
    margin-right:4px;
    font:bold 12px/30px "Trebuchet MS",arial,helvetica,sans-serif;
    text-decoration:none;
    color:#000;
    background-position:3px 3px;
    background-repeat:no-repeat;
    }

    .artists_box a:active,
    .artists_box a:focus,
    .artists_box a:hover {
    color:#FFF;
    background-color:#700;
    }

    *** REFRESH ***

    Notice that the total width of each block anchor is 104px - since they float they will stack 'neatly' into two rows automatically inside our 209px container. I always like to give myself an extra px just in case IE decides to be 'special' about the box model (in the same way some olympics are 'special')

    Also notice the background-position - moving it down 3px each side lines up the little 'artist' pictures rather nicely alongside the text, which we make room for with that 32px left padding. Again we also use the line-height technique to center the text top to bottom... This MAY break if a artists name is exceedingly long, if that happens I'd suggest adding overflow:hidden to chop off the excess.

    I also tossed in a hover state to make it more apparant that they are in fact navigational items.

    The signup box we will also style to look good images off. I'm going to use a 'big trick' here to manage that.

    First, we style the h2 as the entire background-image using the same image replacement techniques we've been using all along.

    #signup h2 {
    width:210px;
    height:126px;
    padding:4px 8px;
    position:relative;
    margin-bottom:-66px;
    color:#000;
    background:#FFE;
    text-align:center;
    font:normal 24px/28px "Trebuchet MS",arial,helvetica,sans-serif;
    }

    #signup h2 span {
    width:226px;
    height:134px;
    position:absolute;
    top:0;
    left:0;
    background:url(images/MAILLIST_Back.jpg) top left no-repeat;
    }

    *** REFRESH ***

    But notice that margin-bottom. That will pull our two inputs up over the image placed by the span. First we style them for Opera, FF and Safari.

    #signup input {
    position:relative;
    margin:0 0 2px 16px;
    font:normal 12px/14px "Trebuchet MS",arial,helvetica,sans-serif;
    }

    #email {
    width:186px;
    padding:2px;
    border:1px solid #888;
    }

    #KT_Insert1 {
    padding:0px 8px;
    }

    *** REFRESH ***

    Because we nulled our margins and padding though, IE is, well. A pain in the ass. It has a few pixels padding that you CANNOT turn off on SUBMIT's... but it does let us set height and it will auto adjust... as such we need to send IE, both 7 and earlier no padding and a height.

    * html #KT_Insert1 { /* lte IE6 fix */
    padding:0;
    height:22px;
    }

    *:first-child+html #KT_Insert1 { /* IE7 fix */
    padding:0;
    height:22px;
    }

    *** REFRESH IE 6 & 7 only ***

    Which I hate double hacking like that - passionately... but for our purposes here it's the 'fastest' solution.

    That finishes off the sidebar, so next we get to #content and the featured artists box. Because we put strong around the artists name, we can style that to be really pretty for people that have images turned off.

    .featured_artist {
    width:363px;
    height:206px;
    padding-top:60px;
    position:relative;
    text-align:center;
    margin:0 auto 10px;
    font:bold 24px/26px "Trebuchet MS",arial,helvetica,sans-serif;
    background:#000;
    }

    .featured_artist strong {
    display:block;
    font-size:48px;
    line-height:52px;
    padding:8px 0px;
    }

    *** REFRESH ***

    The display:block on strong again puts it on it's own line, and we bump the font size to make it 'purty'.

    Of course, we inlined the image which will be absolute positioned atop the all that text.

    .featured_artist img {
    position:absolute;
    top:0;
    left:0;
    }

    *** REFRESH ***

    The myspace link we can nab right quick - for non-image browsers we'll also give it a hover state.

    .myspace_page {
    display:block;
    width:343px;
    height:54px;
    margin:0 auto;
    color:#FCB;
    position:relative;
    font:bold 24px/54px "Trebuchet MS",arial,helvetica,sans-serif;
    text-align:center;
    }

    .myspace_page:active,
    .myspace_page:focus,
    .myspace_page:hover {
    color:#FFF;
    }

    .myspace_page img {
    position:absolute;
    top:0;
    left:0;
    }

    *** REFRESH ***

    the more is just a flat image, but we'll center it too by setting it to display:block and margin:0 auto;

    .more {
    display:block;
    margin:0 auto;
    }

    *** REFRESH ***

    Which just leaves the footer. Again, display:block margin:0 auto will center the image, toss some colors on the anchor. The big deal here is the negative top margin to ride it up over the bottom padding of the menu. Since we've ridden all the content over the table, our total height gets reduced to that magical 100% always placing our footer at the bottom. Again, position:relative places it's content above the table.

    #footer {
    height:64px;
    margin-top:-64px;
    position:relative;
    padding:0 112px;
    text-align:center;
    font:normal 14px/20px arial,helvetica,sans-serif;
    }

    #footer img {
    display:block;
    margin:0 auto;
    }

    #footer a {
    color:#FED;
    text-decoration:none;
    }

    #footer a:active,
    #footer a:focus,
    #footer a:hover {
    color:#FFF;
    }

    *** REFRESH ***

    At this point I would also turn images off but leave CSS on in Opera or FF, and look at how the page looks without images and tweak that appearance too - likewise I'd look at it images on/css off just to see that the page is indeed usable.

    Which is pretty much the whole thing - in the exact order by which I would write this. Sometimes I'd go back and toss a property like position:relative as needed - but really that's the process by which I create the page.
     
    deathshadow, Aug 9, 2007 IP
  10. pixelcommander

    pixelcommander Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #50
    i just wanted to follow up with a post, this is much to go over and i can't believe you are helping me to this extent... i feel like i did when i was in middle school making a project and my mom took over and made it 10x better then what i had planned ;)

    i'm going over all this and trying to apply it to a new design i'm working on. thanks again for everything.
     
    pixelcommander, Aug 9, 2007 IP
  11. pixelcommander

    pixelcommander Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #51
    i'm having troubles getting a footer on the bottom of the pages... i'm about to dive into those links that dan posted so i'm sure i'll figure it out
     
    pixelcommander, Aug 14, 2007 IP
  12. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    434
    Best Answers:
    0
    Trophy Points:
    0
    #52
    What's your code look like? And are you trying to get the footer on the bottom of the page if there isn't enough content to force it over/under the bottom of the browser window?
     
    Dan Schulz, Aug 14, 2007 IP
  13. Salsa_Boy

    Salsa_Boy Peon

    Messages:
    85
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #53
    This reminded of a recent project I'm working on. I like to code with CSS but in this particular project I was told to use a template previously coded in only tables. Ugh!

    Don't make me tell you all the things I had to do to make the site compatible in IE, Firefox AND Safari.
     
    Salsa_Boy, Aug 14, 2007 IP
  14. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    434
    Best Answers:
    0
    Trophy Points:
    0
    #54
    And what about Opera?
     
    Dan Schulz, Aug 14, 2007 IP
  15. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #55
    Salsa and Opera... Madame Butterfly as performed by Ruben Blades. No.
     
    Stomme poes, Aug 17, 2007 IP
  16. pixelcommander

    pixelcommander Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #56
    this is what i have for my css

    and this is what i have for the footer in the PHP file
    This is for a different site but I thought it might work (i'm trying to get into more and more CSS with each site I do)
     
    pixelcommander, Aug 23, 2007 IP
  17. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #57
    The footer div may work but as I understand it, a div is a box designed to contain other tags in it. I guess this doesn't have to be, but then I wonder how you set padding inside it. I thought you'd need the <p> inside the div to say "here's some text" although it will look the same on a website. I just wonder if without another tag inside the div if the CSS works just as well.

    I just read something somewhere that said ISO-8859-1 is automatically used or referenced if you type "content="text/html" or that the word "text" in and of itself would make ISO8859 default. How does UTF-8 make problems? I'm required to use it, as my company is Dutch and needs Western-European characters plus the euro symbol.
     
    Stomme poes, Aug 24, 2007 IP