jamesnotjamie

Yep really good point. I've just re-hauled a site stripping out unneeded IDs and classes and wow it feels slick...

Definitely try and do it locally first. I have tried doing things in sub directories, and in my experience the nightmare of switching over all the links is not worth it. Download MAMP if you're Mac or WAMP if you're Windows and install WP, then code away... WAMP: http://www.wampserver.com/en/download.php MAMP: http://www.mamp.info/en/downloads/index.html If you're struggling setting up a local installation of WP, there are lots of video on Youtube of people giving step by step tutorials... James

This is fantastic

Yeah, the reason I posted the question was because I was looking at the source code of this site last night: http://www.css3.info, and noticed that the style sheet (http://www.css3.info/wp-content/themes/new_css3/css/all.css) used a rather small amount of classes and ID's compared to what I do. It's also written in a very descending style, so everything is running down the page, which I like... Thanks for the links, and comments.

Hi all, I was wondering, if there is any general consensus on which method is better to target an element. Take the following HTML: <div id="outer"> <p>Here is a sentence with a <a href="#">link</a> right in it</p> </div> To target the <p> and the <a>, you could use this in the CSS: #outer p { styling } #outer p a { styling } But then, you could assign an id, or a class to the elements, like so: <div> <p id="title">Here is a sentence with a <a class="link" href="#">link</a> right in it</p> </div> And then target the elements like so: #title { styling } #link { styling } Are there any distinct differences between these two methods, and generally what is used? On a site I'm currently doing I tend to use a mixture and am thinking maybe I should just be more consistent throughout... Would like to hear some general opinions. James

Thank you so much for this. It was the work-around I was trying to find, that I would never have found! I have to say, I'm reasonably surprised that this issue hasn't cropped more for designers, I mean, it's not like big fonts aren't used these days... Either way, a big thank you.

Thanks for taking a look for me. I couldn't seem to get the display:block trick to work for me. I'm assuming you mean apply it to the anchor tag 'logo'? This is such a strange problem. I thought at first it might be to do with the fact I'm using odd fonts, with help from @font-face, but I tried an example with the default serif text and the same thing happened: http://www.arabellamusic.co.uk/test/web.html Notice the odd hover zones again... Hm...

Sure. Scrap the example, here is how I'm trying to implement it into a site: http://www.arabellamusic.co.uk/test/ Notice how the rollover zone for the title appears to be very random. Someone on another forum suggested that browsers compensate space below text for the lowercase descenders (ie, g, y, j, q), but that doesn't explain the space above the heading that seems to be a hover zone also. Any help would be greatly appreciated.

Hi all, I was designing a site and was scratching my head as to why a title wasn't changing state when I hovered right over it, but was when I hovered below it. The region of hover, so to speak, wasn't right over the element. So I mocked up the simplest example to check. Am I being completely and utterly useless here? Take the following example: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style type="text/css"> a {font-size:200px; text-decoration:none;} a:hover {text-decoration:underline;} </style> </head> <body> <div><a href="#">Hello</a></div> </body> </html> In all my browsers (Chrome, Safari and FF) the hover region is not inline with the link element. I tried adjusting line-height, to no avail. Forgive me if I'm missing something obvious. James

Perfect, thanks Pat. Strangely, I tried margin:0; and margin:auto; separately, and they didn't work... Anyhow...

Hi Everyone... My site http://arabellamusic.co.uk has a space at the very top, above the banner image. Any ideas why or how I can get rid/control it? I'm thinking or re-coding the site (or at least the CSS) and using a CSS reset, would this be a reasonable idea? James

Weird, I tried this earlier and it didn't work but does now! Case solved, ta everyone

Hey guys, cheers for the input. The DIV is indeed in a container, which is set to 850px. I have already tried setting a specific pixel width to no avail. And yeah I want the text to essentially hit return every time it hits the edge of the DIV. www.bluestonesband.co.uk is the code To note: I started using a different HTML editor as I used to use Notepad, but I'm now a mac user. When I saved PHP files it seemed to set a different charset or something so the PHP code wasn't parsed. From there I pasted it all into dreamweaver and it fixed the problem, don't know if it's related. I've made sites and never had this problem before :s James

Hi everyone. This is really annoying me as I have used this in the past and it has always worked... I have a div with some text inside and I want the text to go onto the next line when it reaches the end of the div... Simple. Code is: <div style='float:left; width:50%; padding:30px;'> <img src='images/news.gif' border='0' /> <img src='images/line_l.gif' border='0' /> <h1 class='main'>Title</h1> <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </p> </div>