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.

Major Cross-Browser Css Issues-Just When I Thought I was Getting this!

Discussion in 'CSS' started by fishtail1776, Jul 14, 2008.

  1. #1
    Just when I thought I was getting the hang of this css stuff, I just found out that my site only looks good in IE6 browser. I have major cross-browser issues in IE7, Firefox, and other browsers. I tried some things to correct it that I learned about but nothing is working.

    I checked the code too, and only received link errors (parse errors, which I am assuming are link errors). I am assuming that minor link errors would N.O.T. have anything to do with the crappy way my site displays in Firefox or IE7. Right?? If I am right then I need some major help in more ways than one.:rolleyes:

    I attached my home page source codes as copied from the IE6 and Firefox browsers. (Where I am visiting is IE6 only, not IE7.)


    This is my question:

    How do I get it to position properly in IE7, Firefox, and other browsers??
     

    Attached Files:

    fishtail1776, Jul 14, 2008 IP
  2. yankzilla

    yankzilla Peon

    Messages:
    159
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Can you giv me the url? I have IE6, IE7, FF2, FF3, and safari I can check it on.
     
    yankzilla, Jul 14, 2008 IP
  3. fishtail1776

    fishtail1776 Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thank you a bunch I would greatly appreciate the help. I can give you the home page name at least-need to post six more entries in order to be able to do live links apparently. Bummer. Anyway...the site home page is jabsfreelanceworld.com..
     
    fishtail1776, Jul 14, 2008 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Your errors are Major

    The biggest one probably being that you forgot your opening <html> tag : )

    It's not CSS you have to get the hang of-- it's HTML. Wherever you learned HTML, it was out of date-- most of your styling is in the HTML, using things like align=center, font tags, and the such.

    The only place I can think of that is modern in teaching HTML online is HTMLdog.com.
    Avoid w3schools.com as they haven't updated or fixed their errors in a long time (even though lots of people are still learning on them.... never trust a site that teaches the Font tag).

    You have:
    
    <body bgcolor="#c4b7ca" style="BACKGROUND-ATTACHMENT: fixed; TEXT-ALIGN: center">
    <div class="sf_outer_wrapper"> 
    
    Code (markup):
    An example of what you should be doing:

    <body>
    <div id="wrapper">

    CSS:
    body {
    background-color: #c4b7ca;
    text-align: center;
    }

    #wrapper {
    background: url(Purplejabsfreelanceworldlogo2-12-2008.PNG) position position no-repeat; (unless you want a repeat)
    }

    I wouldn't say background-attatchement: fixed unless I was talking about a specific image.
    The div with the class of style23 seems to be your major page container. It has a width set on it already. I'd give it an id instead, since there seems to only be one of them.

    <div id="pagecontent">

    #pagecontent {
    width: 758px;
    margin: 0 auto; (this centers blocks in all modern browsers and also IE6 when in Standards Mode)
    background-color: #fff; (white)
    }

    I would not set a height, since then if you get more content than that, all browsers except IE6 will have to cut the content off. You can use min-height instead, and height just for IE6:
    #pagecontent {
    width: 758px;
    margin: 0 auto;
    background-color: #fff;
    min-height: 725px;
    }
    * html #pagecontent {
    height: 725px;
    }


    The last declaration is a way to tell something to IE6 and below. IE6 really only has a handful of times when it needs this, so use it sparingly. IE7 will not see it.

    If you have a local library nearby, I would strongly urge you to check out
    Build Your Own Web Site the Right Way Using HTML and CSS by Ian Lloyd. Before this book, I knew nothing. Now I build semantic, valid, accessible sites (the designs could use some work, but teh codez are pretty). That book only gives you a start, but it fully explains how to write HTML (he uses XHTML, but there's little difference and zero advantage to using XHTML over HTML, really) and some really basic CSS.

    A better book for positioning stuff and setting up the whole page in CSS (AFTER learning correct HTML) is
    HTML Utopia: Designing Without Tables Using CSS by Rachel Andrew and Dan Shafer
    This book really got me started with how to position things, and the pitfalls of floats and absolute positioning (and when to use them).

    Both these books are old enough that libraries should have them, if they're large enough. Even if you're not a book learner (as many people online aren't), you actually build a website in the first book (see it at www.bubbleunder.com) and with the second book, you take a typical PSD with ready-made XHTML and position it, the goal being to make the code look like the image some designer made and how. You can copy the code from the website and use your own CSS too.

    Both books only give you a beginning, but it's a nice, stable beginning, and you can more easily learn further from there.

    Otherwise, if your goal is just to get this site off the ground as fast as possible, consider asking someone else to do the code. Make sure they know how to write valid, accessible (think blind people, old people, google, people with slow machines or bad internet connections, etc), semantic (using the right tags for the job) and beautiful code. Okay, the last one you'd only recognise after you know how to code yourself : )

    *edit:
    A good tip: check your site regularly WHILE you code, in ALL browsers. Otherwise, you'll find yourself building to a particular browser. They all have their little quirks. IE6 has a ton of little quirks-- the worst one to use as your guide while building (but keep checking in it while you build!). Even Firefox isn't some singularly wonderful browser that you can build for and not check in other browsers. Waiting until you are done, or mostly done, to check and fix, means you're spending more time and effort fixing something already finished rather than nipping it in the bud when there's only a line of code to change.
     
    Stomme poes, Jul 15, 2008 IP
  5. fishtail1776

    fishtail1776 Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thank you for your help. I wonder why it has to be so d&mn complicated to make a website though. I am getting sick and tired of this. I would expect to be able to get one page done in a couple of hours. I am getting so sick of this!!@#$!@#$!@#%
     
    fishtail1776, Jul 16, 2008 IP
  6. markowe

    markowe Well-Known Member

    Messages:
    1,136
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    165
    #6
    Yeah, CSS can be a real pain in the &^% - you just about get it working in one browser and then idly wonder what it will look like in another and... ARGGHHH!!

    People make a living just from doing this stuff, so don't get worked up - learn it, or pay someone else to do it for you...!
     
    markowe, Jul 16, 2008 IP
  7. fishtail1776

    fishtail1776 Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I am sorry about my frustration. I have decided to just start completely over from scratch. I will be making a whole new site. I am doing okay with it, but when I do what I am told it messes everything up. For instance, why does nothing happen when I try to make a different body background color? I was told to put this (example):

    body {
    margin: 0px;
    padding: 0px;
    background-color: #9933cc;
    font: normal 0.92em Arial, Helvetica, sans-serif;
    }

    All I wanted was the bg to be changed from the boring FFFFFF to a different color. (not mad at you just a little frustrated still.) I am not sure why I cannot accomplish such a seemingly simple task.
     
    fishtail1776, Jul 16, 2008 IP
  8. markowe

    markowe Well-Known Member

    Messages:
    1,136
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    165
    #8
    Darned if I know why it's so tricky - I know exactly how you feel! You might try just color instead of background-color - no, I don't know what background-color is for, I'm maybe half a step ahead of you at best!
     
    markowe, Jul 16, 2008 IP
  9. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #9
    Well what you have should work, though your 6 digit hex code is unnecessary.

    
    *{margin:0;padding:0;}
    
    body {
        background-color: #93c;
        font: normal 0.92em Arial, Helvetica, sans-serif;
    }
    Code (markup):
    Would perhaps be a neater solution.

    As for your bg issues, check your HTML for "bgcolor="#FFFFF" or just "#ffffff" or "#fff" to see if its being overidden - if you are using Dreamweaver/Frontpage/Expression - all sorts of crap is going to happen.
     
    blueparukia, Jul 17, 2008 IP
  10. fishtail1776

    fishtail1776 Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Hello, I do thank all of you for your feedback and help regarding my site so far. I still have a load of questions. I would even consider paying someone to manually check my code for me, if it were to take more than a few minutes to fix. Is it possible to have this done for at least one page for like 20 to 25 dollars?? I also could work out some kind of exchange, such as article content written in return for any sites you are working on.

    Regarding site building programs and site creation in general...

    I decided not to ever use another site building program again, and just do all my sites from scratch from now on. But of course I still have a lot to learn. For those of you who have looked at my site before (and even if you had not yet), I wondered if you would not mind taking a few minutes to take a look at the re-design I did. I don't expect much if you are doing this out of the goodness of your heart, just to notice the major mistakes is all for now.

    and...

    In case I want a more extensive review...

    Like I said, I also am considering paying someone to do that for me, if my site is still so screwed up it would require major code repair. I mostly want to know that my CSS and HTML is not outdated.

    I also may consider paying someone to fix my template so it looks good on all browsers. Right now it views best in IE 6.0, IE 7.0, and Firefox 3.0.

    If I pay for a thorough site template review I would prefer if the person uses PayPal. I cannot afford a lot but I hope to make it at least somewhat worth your while. I also could provide article content in return.
     
    fishtail1776, Sep 24, 2008 IP
  11. fishtail1776

    fishtail1776 Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Hey, I wanted you to know I decided to just start over from scratch, and I would like you to take a look. I also wondered if you could offer a reasonable rate for manual review of one page of my site code.

    you can take a look at the following site again to get an idea of what I have now (views okay right now in IE 6.0 and 7.0 and in Firefox 3.0, would like to get it to view right in all browsers):

    jabsfreelanceworld.com (my site, not sure if I am allowed to place live links yet on my forum posts).
     
    fishtail1776, Sep 24, 2008 IP
  12. markowe

    markowe Well-Known Member

    Messages:
    1,136
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    165
    #12
    Hi, I can say this much, it seems to be working fine in IE, Firefox and Chrome, as far as I could see.

    Can't help you much with those cross-browser issues. At the very least I am trying to learn, when I am doing a site, to compare the site in all browsers after EACH element I create - NOT do the whole page in my favourite browser and THEN check the others!

    But I still haven't quite learned that lesson...
     
    markowe, Sep 25, 2008 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #13
    Well, first I thought you said CSS. You are falling into the classic trap most people moving from straight HTML fall into in that you are using nothing but presentational markup. This is why IMHO that decade old outdated coding style shouldn't even be taught anymore.

    1) Tags like font and center, attributes like align, inlined 'style', presentational attributes on the BODY have NO PLACE if you are using modern coding techniques. You shouldn't even be using them.

    2) your markup, classes and ID's should say what things are, NOT how they appear. "Style23" is vague and meaningless. Using a class like "left" is presentational, you might as well use presentational markup at that point, etc, etc. If something is a heading, use a heading tag. If something is a list - like say a menu, mark it up as a list.

    Pretty much if you are moving to CSS, the first thing you need to do is unlearn everything you currently know about HTML.

    One of the ways I use to guage how bad markup is done is to take the actual page content (strip all tags) and compare it to the size of the html. I use the formula 1k + content size * 1.5 + 200 bytes per inlined CONTENT image or embed. (presentational images go in the CSS) rounded up to the nearest half k.

    What you have here is 1.5k of content and no content images, so there's really little reason for your HTML file to be more than 3.5k - while you have 8.2k of markup.

    I'm seeing all the telltales of some crapy WYSIWYG being used to build the page. Chuck whatever one you are using in the trash (I can't even tell which), it's only screwing you over.

    Basically, if you are going to work in CSS, you first need HTML conducive to doing so - which means we need to strip it down to the basics saying what things are.

    <!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"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=iso-8859-1"
    />
    
    <title>
    	Home - J.A.B.'s Freelance World
    </title>
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection"
    />
    
    </head><body>
    
    <div id="container">
    
    	<h1>
    		J.A.B.'s Freelance World - 
    		<em>A whole New World of Writing</em>
    	</h1>
    	
    	<ul id="mainMenu">
    		<li><a href="/">~~Home~~</a></li>
    		<li><a href="/contactus1.php">~~Contact~~</a></li>
    		<li><a href="/blogdirectory.htm">~~Blog Directory~~</a></li>
    		<li><a href="/samples.htm">~~Julie's Samples~~</a></li>
    	</ul>
    	
    	<div id="content">
    	
    		<p class="construction">
    			Site Under Construction, Bear With Us!
    		</p>
    		
    		<hr />
    		
    		<h2>Greetings from Julie, the Founder of J.A.B.'s Freelance World</h2>
    		<p>
    			Hello, I have been freelance writing for three years now and my operation
    			has grown to what J.A.B.'s Freelance World is today. Our company takes 
    			pride in providing fresh content for all your website, blog, and print 
    			publications.
    		</p><p>
    			You can count on us to come up with new ideas for articles, surveys,
    			polls, news, and so on. Your visitors are sure to return again and again
    			to your site because what we provide is more than just for search engines.
    		</p>
    		<a href="http://www.jabsfreelanceworld.com/samples.htm" class="samples">
    			View Samples
    		</a>
    		
    		<hr />
    		
        <div class="newsBox">
        
    			<h2>J.A.B.'s Freelance World News </h2>
    			
    			<h3>
    				J.A.B.'s Freelance World Soon to offer Media Editing and Scripting 
    				Services
    			</h3>
    			<p>
    				In addition to provided high-quality website content and feature 
    				articles, our company services include video and audio editing 
    				services. If you have a media project you would like fine-tuned
    				please contact us.
    			</p>
    			
    			<h3>
    				HJP Stock Photos.com and Hannah Joy Publishing.com Coming Soon!
    			</h3>
    			<p>
    				J.A.B.'s Freelance World is also the proud owner of HJP Stock 
    				Photos.com and Hannah Joy Publishing.com. These websites will
    				be launched very soon. HJP Stock Photos.com will provide photos,
    				clip art, and website art of all kinds.
    			</p>
    			
    		<!-- .newsBox --></div>
    							  
    	<!-- #content --></div>				   
    	
    	<div id="footer">
    		&copy; 2008 by J.A.B.'s Freelance World.com. All rights reserved
    	<!-- #footer --></div>
    	
    <!-- #container --></div>
    
    </body></html>
    Code (markup):
    Really, that should be all you need for markup (+/- 5%) for that layout. EVERYTHING else you were doing on that page should be in your CSS if you are going to use CSS.

    If I have the time later I'll toss together said CSS and give you a section by section explanation of what was done and how it works.
     
    deathshadow, Sep 25, 2008 IP
  14. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #14
    Here's how I'd write that page:
    http://www.cutcodedown.com/for_others/fishtail1776/template.html

    As with all my examples the directory is unlocked so you can get at the gooey bits:
    http://www.cutcodedown.com/for_others/fishtail1776

    Valid XHTML 1.0 Strict, Valid CSS level 2, Tested working in IE 5.5, 6 & 6, FF 2 & 3, Opera 9.27 and 9.52, and Safari 3.

    I made some stylistic changes. First I made the news items have their headers and content appear consistantly. You had the color of the second one change for no good reason. I upped the font sizes to usability minimums, and fixed some font issues.

    "script" is a 'raster' font - it is inadvisable to use windows only raster fonts on a website, as some browsers, even under windows won't even render it (chrome, Safari), while others do not even scale them to the same size (firefox).

    Instead of using a image for the background of the whole header, I changed the fixed border to a border, and only put that one tiny image in as a background.

    I will write up a more complete explanation either later tonight or tomorrow afternoon... but suffice to say this is why separation of presentation from content moving anything that says how it appears into your CSS is superior, given that the CSS and HTML files COMBINED are less than half the size of the original html.
     
    deathshadow, Sep 25, 2008 IP
  15. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #15
    Had a couple minutes, banged out the breakdown.

    Ok, HTML first. I always try to completely write my HTML with no regard to how it's going to look BEFORE laying out a single line of CSS. First I started out with one of my stock baselines for markup. I use XHTML 1.0 Strict - XHTML for the clearer structure and stricter rules it brings to the table, Strict because I don't even want to THINK about using deprecated tags or attributes. A great many old tags and attributes are not just outdated, but bad practice when it comes to accessability so let's not even go there.

    http://battletech.hopto.org/html_tutorials/baselines/baseTemplate.html - the base template

    The code we use will follow my style guide. I suggest all developers either adopt an existing or develop their own style guides. Consistancy of formatting will carry you further than a half dozen 'tools' that do this stuff 'for you'. (or as I like to call it, incorrectly for you)

    http://battletech.hopto.org/html_tutorials/styleGuide.txt

    I always make the title in the format "Page name - Site Name". For people using tabbed browsers this is the best way of doing it.

    Next we link in our external style sheet. I do not even BOTHER trying to inline CSS or even a STYLE anymore when developing templates - it's all going to go in an external sheet in the production copy, so why not just put it there in the first place? You'll notice I say the media types - I'd rather have my flat markup print with no styling or appear on a handheld with no styling than apply screen stylesheet which might be broken. If this were for a client paying me we would discuss creating custom sheets for each device type.

    Which finally brings us to our document body.

    It is obviously a fixed width layout, this means the entire document gets to go inside a container div, which I choose to call #container.

    First thing on the page after that is your heading. Since this is the one unique heading on the page that would appear on every page, much like on a newspaper it gets an H1. (remember, the only difference between the big heading on the first page of a paper and the little heading on the subpages is presentational). Since you have text styled for emphasis, we apply emphasis around said text. It also gets to be an anchor as per your original.

    Next is the menu. Menus are lists, therin this becomes an unordered list. You'll notice I got rid of all the absolute links. There is no reason to ever waste bandwidth on the full URL when you are sending off the same server.

    The content area gets a white background, so we will slap that into a DIV called... Content.

    The construction paragraph I treated as a normal paragraph that gets some additional formatting via the class.

    Horizontal rule - I dislike using these myself, but given your styling it's acceptable.

    Next is the first header on the page. Since we've already used h1, this gets to be a h2.

    Some paragraphs, nothing to write home about there.

    The '.samples' anchor I didn't bother wrapping in a container. Since it's after a block level P, inside the block level #content, and followed by a HR, there's no reason to waste extra tags here.

    .newsBox - because this seems to be a set of news items with slightly different styling, I chose to wrap these in an extra container. In a future layout you might decide to make these their own column or some such, and the less HTML you have to change for a new layout the better - after all that's one of the reasons to use CSS in the first place.

    The first header in .newsBox is NOT a subsection of the greetings above, and we can only have one h1 on a page, so this too should be an H2. Thankfully .newsBox around it will let us style it differently.

    The next heading is a subsection of the 'world news' header, so it and the one after both get to be H3's, while again we just have normal paragraphs.

    We close .newsBox and #content putting comments BEFORE them to say what it is we are closing. If you read my style guide you'll see that I put the comments BEFORE the closing tag so as to avoid a particulary nasty rendering bug in IE.

    Next is the footer. It's a sentance fragment so it doesn't warrant wasting a paragraph on, so we just give it a DIV with an ID.

    Close the footer, close #container, close body and HTML and we're done. You'll also notice I put /body and /html on the same line, just as I put <html><head> and </head><body> on the same line. My reason for this is that with these elements there should NEVER be anything for code between them in the first place, and assuming proper use of the tab key it's fairly clear what's going on so why waste the white-space?

    That's it for the HTML, let's talk CSS.

    The first thing I did was what's called a 'reset' - in this case I nulled all margins and padding on all elements. All the different browsers all start with different default values on elements because the specification doesn't really say what the defaults should be. This reset CAN cause problem with forms, so if you are going to use forms you'll want to switch that to a more targeted reset like:

    html,body,address,blockquote,div,
    h1,h2,h3,h4,h5,h6,
    hr,ul,li,menu,ol,ul,
    table,tr,td,th,p,img {
    	margin:0;
    	padding:0;
    }
    
    img {
    	border:0;
    }
    
    Code (markup):
    I don't recommend the larger 'resets' some people advocate because frankly, 99% of the time they are either redundant code or target elements you aren't even likely to use.

    Next we style our body. Set the background color, set our default font and sizes. I used 85% as our baseline 'content' font so that it will obey the system metric in Opera and IE (anyone who cares about accessability isn't using FF or Safari anyways), and can be rescaled in IE6/eariler. If you aren't familiar with putting all the font attributes on one line, the format is "style weight size/line-height face". So normal means normal weight and style, 85% the default font-size, 130% of the font-size as our line-height, and "Palatino Linotype",serif as the family. Always include a list of fallbacks should your desired font not be available.

    We also set text-align:center here which will (incorrectly) center #container in IE 5.x or any IE browser that has no 'standards' mode.

    #container we just set our overall width for the layout. Because to be 800px friendly we need to make room for the scrollbars and any borders, we subtract 32px to get our 768px. Margin 32px auto; sets the top and bottom margins to 32px giving us a nice spacing around it, and the auto sets left and right to auto-adjust, centering the page in the more standards compliant browsers.

    Next we just set some default colors for our anchors. No suprises.

    h1 - unlike yours which tried to put the whole background in as an image, I chose to crop down your little picture and assign that as the background, instead using a 8px border and a even height. Because we are working in a fixed width we have to use a fixed size (px) fonts unless we are ok with risking different fonts or font-sizes breaking the layout. Since we can use 24px as the font-size, we don't have to worry about anyone complaining of the text being too small. Using a line-height equal to our container height will auto-center the text top to bottom.

    h1 a - turn off the underline. You had it on, I prefer it off - you want it on, just remove that declaration. Set the color here too.

    h1 em - I switched to a font that is less likely to cause problems cross-browser. Script is not a font one should really be using on anything newer than windows 3.1 anyways. I went with the generic 'cursive' family, one of the actual default font-families which on windows should default to comic sans MS, but on other operating systems could resolve as almost anything. I decreased the font size slightly just to tweak the appearance a little.

    #mainMenu - our menu list. First we turn off bullets with list-style, some padding on the top and bottom spaces it out nicely, and again due to the fixed width I set a px sized font, again at 18px nobody should be complaining about it being too small meaning fixed width is 'ok' to use here.

    #mainMenu li - I set side padding on this to space out our items, and set them to display:inline; - that display setting makes all the items appear on a single line.

    #mainMenu a - simple color settings.

    #mainMenu a:active :focus :hover - these are all set so that there are visual cues for keyboard and mouse navigation.

    #content - first we set our general text align to left, overriding the center alignment we did on body for the contents of this DIV. Simple 16px padding on all sides to make it 'pretty' and some colors round it out.

    #content .construction - the construction paragraph you seemed to want centered and bold. Again that's presentation, so we do it here.

    #content p - simple bottom margin to space our paragraphs apart. I'm only setting it on the bottom because it gives better control top-down without margin collapse headaches.

    #content hr - your horizontal rules. I set display:block on it 'just to be sure' they obey our sizing info. These won't center in IE 5.x - IMHO that's a BFD, who gives a ****.

    #content h2, #content .newsBox h3 - these share enough appearance I set them at the same time. They have a top and bottom margin, they're the same size font.

    #content .newsBox H3 - the only thing that's different between the normal h2 and .newsBox h3 is that the latter is aligned left, so we override the center setting.

    #content .samples - setting the whole anchor to display:block let's us set the align:center on it's contents. Omit the display:block and it won't center on it's own.

    #content .newsBox h2 - Fonts and colors, fairly mundane stuff.

    #footer - top margin to pad it out, color setting. Simple enough.

    ... and that's it. Any questions, fire away.
     
    deathshadow, Sep 25, 2008 IP
    markowe likes this.
  16. fishtail1776

    fishtail1776 Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Wow thank you for your help. It will take me a little while to process all of this. :) I may have more questions as I sift through this info. Yeah, my biggest problem is there are certain styles and formattings I want to achieve in CSS and don't know how to do it yet, and so instead I inserted outdated HTML to show how I would want it to look, but yes my goal is to figure out what CSS code to instead use (instead of the HTML whenever possible).

    BTW...I stopped using those crappy text editors awhile ago because I would like to do it myself (learn how to code myself). Mostly because I was so sick and tired of my websites not turning out the way I wanted them to turn out, and I don't have thousands of dollars to pay someone else to create a site for me (That and I want to learn how to do this stuff anyway).

    Anyway...so knowing that I have not used any HTML/CSS editors for this project and I am somewhat of a beginner at this I hope you can say that I have made a little progress considering. LOL :) Anyway, I thank you all for your help and I will see what information I can use from this.

    I am planning on going back to school after the 1st of the year (2009) sometime because I am sick of not being able to know how to do this stuff. In the mean time I do greatly appreciate your help. Hopefully we will keep in touch and I may possibly need more reviewing.

    I am actually hoping to hire someone who can review web page codes for me once in awile soon, so I will take all this help in consideration. It will be a bit before I get back to any of you though. This is a lot to process.
     
    fishtail1776, Oct 6, 2008 IP
  17. fishtail1776

    fishtail1776 Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #17
    Regarding "Basically, if you are going to work in CSS, you first need HTML conducive to doing so - which means we need to strip it down to the basics saying what things are..." from an earlier post:

    Thank you I may have some questions for you regarding this (the way you condensed my code), and yes this is very interesting and I am going to take it and upload it to see what it is I am looking at. :) Give me a few days though as I have a load of work to do. *wink*
     
    fishtail1776, Oct 6, 2008 IP
  18. markowe

    markowe Well-Known Member

    Messages:
    1,136
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    165
    #18
    Hey, but crappy text editors are a perfect way to learn CSS and HTML. It's not just reverse snobbery by web designers when they say they prefer to use NotePad for web design. A site really can and perhaps should be built from the ground up in a text editor for complete control over every element.
     
    markowe, Oct 6, 2008 IP
  19. fishtail1776

    fishtail1776 Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #19
    yeah, but I have yet to find a text editor that would actually do what I want it to do. :)
     
    fishtail1776, Oct 6, 2008 IP
  20. fishtail1776

    fishtail1776 Peon

    Messages:
    22
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #20
    Yeah, but it's hard to find a text editor that will do what I want it to do. Therefore, I am learning everything now by scratch, and copying and pasting useful code from lessons I take.
     
    fishtail1776, Oct 6, 2008 IP