12 replies [Last post]
TheEveningHoot
TheEveningHoot's picture
Offline
newbie
Last seen: 8 years 39 weeks ago
Timezone: GMT-7
Joined: 2011-02-23
Posts: 4
Points: 5

Hi there,

I would appreciate any help with trying to remove the white padding/margin between the logo and the navbar of www.divergentbooks.com. It shows up as seamless on Chrome and Firefox, but leaves a gap between the two elements in IE. I've tried everything, but to no avail. What am I doing wrong?

Dimitri

jon19870
jon19870's picture
Offline
Enthusiast
Lancashire, England, UK
Last seen: 4 years 45 weeks ago
Lancashire, England, UK
Joined: 2007-01-05
Posts: 195
Points: 194

div#logo a { display:block; }

div#logo a { display:block; }

TheEveningHoot
TheEveningHoot's picture
Offline
newbie
Last seen: 8 years 39 weeks ago
Timezone: GMT-7
Joined: 2011-02-23
Posts: 4
Points: 5

Wow, thank you, that worked

Wow, thank you, that worked perfectly! Is there a difference between using

div#logo a { display:block; }

or

#logo a { display:block; }

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 35 weeks 2 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

TheEveningHoot wrote: Wow,

TheEveningHoot wrote:

Wow, thank you, that worked perfectly! Is there a difference between using

div#logo a { display:block; }

or

#logo a { display:block; }

Specificity.

"div#logo a" has a specificity of 0,1,0,2
"#logo a" has a specificity of 0,1,0,1

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Versc has a cheat sheet

Versc has a cheat sheet pinned up on the wall Big smile

Adding the element to an id is the proper way to do things, simply doing #foo is a form of shorthand, perfectly valid though and saves a few 1's and 0's not versc's 1's and 0's though.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 35 weeks 2 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

Actually, #logo is more

Actually, #logo is more efficient than div#logo. Laughing out loud

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Utter rubbish Anyway that's

Utter rubbish Smile

Anyway that's what I said Puzzled saves 1's & o's never said it was efficient or if you prefer

Quote:

Since IDs are unique, adding a tag name would slow down the matching process needlessly.

But I said that more or less in the previous thread that ran similar to this one couple of days back Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Oh and lets me bloody clear

Oh and lets me bloody clear about the venerable Mozillas utterings, descendent selectors are expensive but they should not be cast as something bad, remember until recently one couldn't use the child selector cos of one silly browser and even then descendent selectors DO have their place and are used a lot for good reason, although that reason becomes less so with the ever increasing tide of the dynamic CMS type site and themes.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jon19870
jon19870's picture
Offline
Enthusiast
Lancashire, England, UK
Last seen: 4 years 45 weeks ago
Lancashire, England, UK
Joined: 2007-01-05
Posts: 195
Points: 194

An interesting read.

An interesting read. Personally I have always done it so I know what element the rule applies to. It makes it quicker for me to understand why I might have applied certain rules. When coding my HTML, I only add classes and IDs if necessary and depend quite heavily on descendant selectors like so...

div#main-nav ul li a { display:block; text-decoration:none; }

Even though this could be wrote at this...

div#main-nav a { display:block; text-decoration:none; }

Say for instance I had 12 anchor tags inside my #main-nav, I'm not going to add a class to each one of them and target them like so...

.main-nav-anchor{ display:block; text-decoration:none; }

Would the time saved using this method to parse the CSS file not be added to the HTML rendering as additional attributes have been added?

I can't get the quote working, here it is anyhow...

Try to put rules into the most specific category you can

Don’t be tempted to build long selectors, because it can be the biggest slowdown in the system. It is better to be specific and add a class to the appropriate elements.

NO – ul li a
YES – .list-anchor

TheEveningHoot
TheEveningHoot's picture
Offline
newbie
Last seen: 8 years 39 weeks ago
Timezone: GMT-7
Joined: 2011-02-23
Posts: 4
Points: 5

How would I go about making

How would I go about making the spacing above and below the title the same? In IE, the spacing above the title is very small while the spacing beneath it is too big. I'd like to get it to look somewhat like it looks in Chrome right now. Link: divergentbooks.com.

jon19870
jon19870's picture
Offline
Enthusiast
Lancashire, England, UK
Last seen: 4 years 45 weeks ago
Lancashire, England, UK
Joined: 2007-01-05
Posts: 195
Points: 194

You haven't closed the <p>

You haven't closed the <p> tag above your main content. Also, don't give your headings, etc class names which resemble the way they are presented on the page. I see you have classes such as "alignleft", "alignright". If need be give the element a unique ID if it is unique (such as your date) You should be doing something like this...

p#todays-date { float:right; }

TheEveningHoot
TheEveningHoot's picture
Offline
newbie
Last seen: 8 years 39 weeks ago
Timezone: GMT-7
Joined: 2011-02-23
Posts: 4
Points: 5

I cannot seem to find the

I cannot seem to find the place where I'm missing a

tag. Thank you for your advice on alignleft/right. Smile

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 35 weeks 2 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

TheEveningHoot wrote: I

TheEveningHoot wrote:

I cannot seem to find the place where I'm missing a </p> tag. Thank you for your advice on alignleft/right. Smile

I imagine validating would help with that.