HTML/CSS help? I'm going crazy!

[Kata]

Hi all,

I am a very amateur web designer, self taught, and I build/run my site in notepad! As such, I try and keep things extremely simple, all I want is a good looking site that does what it needs to, and runs well in all browsers with the minimum of fuss.

I have spent a few weeks struggling through various issues, and usually fixing any problems that I come across through the use of google. However, this latest one has me at my wits end after hours of tinkering and searching.

I have a page, with a load of content (just text, basically) inside a <td> element. This was all fine, until I decided that within this element I wanted a 'text box', of 25% width, floating on the right hand side - a 'latest news' box. I added this through use of a <div> class.

<table border="5" width="100%" cellpadding="20">
  <tr>
     <td width="100%" valign="top">
          <div class="news_box">
                <h3 style="color: #00007A">Latest News</h>
                <ul>
                <li><p style="color: #00007A">Text</p></li>
                <li><p style="color: #00007A">Text</p></li>
                </ul>
           </div>
	<p>Text</p>
	<p>Text</p>
	<p style="text-align:center; font-weight:bold;">Text</p>
	
<div id="countbox" style="color:white; text-align:center; font-size:0.875em; font-weight:bold;"></div>

	</td>
	</tr>
</table>

.news_box {
             width: 25%;
	padding: 7px;
	float: right;
	background: #1e90ff;
             border:2px solid #ffffff;
             margin:10px;
	font-size: 0.875em;
	font-weight: normal;
	}

Now, this all works fine, except: it resets the text size (which is slightly reduced, from 1em to 0.875em, on my site) to 1, on the whole page, despite the correct text size being set in every bloody place I can think of. If I remove the div, all is fine, replace it, all text is screwed.

Another interesting point is my CSS file; if I put the div info near the start of the file, it works (apart from the text), if I put it near the end - it is ignored! What the hell?

Can anyone offer some advice, for what I am sure is a trivial issue for someone in the know. I can post the links and html/css files if that would help - its only a single page and single css file.

Thanks hopefully...

Kata

[tiggerai]

Your best bet will be to read up on layouts without tables... they are hell to layout in.

Also you've got inline styles in there

<p style="text-align:center; font-weight:bold;">Text</p>

Which should really be in the CSS with a class attached (as you've done with the news_box)

try a float:right on that news_box style - or a text-align:right

it shouldn't affect your text-size - if everything is cascading properly...

CSS is cascading... if you move the div there may be something else overwriting the styles later on... without seeing the rest its difficult to diagnose!

Your site may look ok to visual readers, but try taking the CSS off and seeing if it's still readable... Lots to learn glasshopper!

[Kata]

Thanks very much for such an amazingly quick reply tiggerai. I shall dive into investigating getting rid of my tables when I have the chance at home - the single 15 inch screen that I have at work is incredibly frustrating to do any work of that kind on!

Perhaps the 'CSS only' dropdown menu that I have is giving problems with the css file and the placement of info in it; it seems somewhat complicated

The site is www.thousandeyes.co.uk (front page). Maybe I need to have a bit of a rework, and fully implement CSS all the way through.

[Zak33]

I can't help with it at all, but it's a lovely looking simple page. Like the logo too.

I like simple and clean.

[Mike Fishcake]

Personally, if anyone I know is asking about setting up a website, I advise them to use wordpress for a simple site or Joomla for something a bit more complex. They're both incredibly powerful systems, and they save a hell of a lot of headaches with regard to techie setups. All you really need to worry about is the content. There are a stupid amount of plugins available to do pretty much whatever you need to do with them.

However, if you're actually looking at learning something about web programming from scratch, that is a bit counter-productive

[Kata]

Thankyou Zak, that's appreciated Simple and clean was what I was aiming for, and the logo is one of my favourite parts

I'll give it a big overhaul behind the scenes as soon as I get the chance, and hopefully get the code as clean and simple as the layout

[scaryjim]

Page looks OK to me!

Which CSS styles you see on the page *will* depend on the order in your CSS files - that's part of what "cascading" means (although the cascade is more complex than that). But in general style statements further down your file will replace style statements higher up your file if both are of equal importance. I've been a professional web designer / developer for more years than I care to count, and sometimes CSS does things that I just don't understand - generally I mess around until I find something that works then try not to change it

I'd second rai's advice to learn how to layout without tables. Web design is a constant struggle between your vision for the site and dealing with obstacles (non-standard browsers, accessibility etc) - the big secret is to not let that struggle get you down!!!

[Flash477]

Your problem may well be stemming from the fact that you haven't closed your h3 tag in the news box and so it is being applied to the text below

Also it is best where possible to use inline CSS as *edit* least (not more!) *edit* as possible as it can get confusing.

One thing that you might find really useful (I do, especially when working with very large CSS files), is a plugin for Firefox, called Firebug - it allows you to select any element on a page, and it will show you where it is picking up its CSS from. It can't help in all situations, as IE doesn't always work the same way, but it will help you in most

[Kata]

Dear Flash.

Will you excuse me, while I go beat myself around the head with a broom for my idiocy? It works now...

I'm so stupid...sometimes a mistake is glaring out at you and you just can't see it!

[Flash477]

No problem

There are a couple of other things as well:

• The script tag at the top should be within the head
• You have the page specified at XHTML, so the link should first be moved into the head section, and the end should be /> not just >
• You are also missing alt tags from your images

http://validator.w3.org/ is good for checking code or an app with code folding and/or syntax highlighting (I use Ultraedit, although there are good free apps around to) will also help you spot mistakes

[Kata]

Now I am confused...I made the first two changes you mentioned, and now the bottom of all my menu icons has been cut off, and the dropdowns don't work!

Edit: Oops, fixed that

[tiggerai]

We all make mistakes like that... even when we've been doing it years!!

It's a constant learning curve! (have done something similar at least twice today!)

[Flash477]

OK, so is there a copy of the page anywhere with said problems that I can look at?

[Kata]

Well, I think said problems are now sorted. I'd be very happy, and grateful of course, to send you a copy of the page for general 'you shouldn't have done this, you idiot' review, though - if you're bored enough

[Flash477]

Nah that's ok thanks

We all had to start somewhere - at least when I started I didn't have to pickup CSS at the same time. Kodus to you though doing it by hand, when you come to sort out problems in the future you will be able to spot them a lot quicker than people used to using WYSIWYG editors

[scaryjim]

We all make mistakes like that... even when we've been doing it years!!

It's a constant learning curve! (have done something similar at least twice today!)

+ 8million to this. Not a day goes by when I haven't done something dim either in HTML / CSS or in C# (today's was misspelling a variable name - it's taken me 2 days to track that one thanks to my "error handling" code hiding it... )