Image border probem + Avoiding 2 CSS files

[FONT=“Verdana”]Could someone please take a look at my site http://nkdogwalking.com/about.html and tell me why the image border on the right isn’t working? I recently changed things around a bit. When it floated on left, it was fine. I think floating to the right started this. Unless I made some error when recoding.

Also, I added a second CSS page because I didn’t want the Rates and Contact page to have the new psuedo element I added (first letter colored). Was there a way around that without adding a second CSS page? I would greatly appreciate some help.[/FONT]

Hi,

The image is 196px wide with a border making it 198px wide. It sits in #sidebar which is only 190px wide so 8 pixels of to stick outside the container and are hidden.

Increase the sidebar to match the width of the image or reduce the width of the image.

Regarding the first-letter styling (I assume that’s what you meant) then why didn’t you just an extra class to #main and style it from there.


<div id="main" class="intro">.........


.intro p:first-letter{etc.....}

Then only add the class to the pages where you want this to occur. You don’t want to add another whole stylesheet for a different page!

Or if you are using the first letter everywhere except for one page only then reverse the process. You could add a class to the body element on that page only and re-style the first letter back to normal.

<body class=“ratespage”>

.ratespage #main p:first-letter{…reset the styles back to what they should be}

Hi,

I’m afraid that design isn’t my strong-point (as you can tell by my site) and I’m more interested in the code underneath. The html code on your site looks fine and well structured so I can’t really suggest anything else there.

Perhaps the design could do with a bit of flexibility and use min and max width instead of a fixed width (ie6 would need the fixed width though as it doesn’t understand min/max). Having an elastic width could let your content grow and shrink with the viewport a bit more. I;d keep the sidebar a fixed width but let the content fill the available space.

I notice in your code you have this:


#wrapper {
 [B] width: 850px;
  min-width: 600px;[/B]
  margin: 30px auto;
}

If you set a width then you get width so the min-width is redundant if it is the same unit as it will never come into play. If the min-width was larger than the width you set then you would get a fixed width still but at the larger size. Just remove the min-width as it is redundant.

If you had said:


#wrapper {
[B]  width: 80%;
  min-width: 600px;[/B]
  margin: 30px auto;
}

Then that would be valid because the width is fluid and at some point the min-width would be triggered (assuming it wasn’t viewed on a small mobile of course).

For a review or suggestions on your site design then visit the review sections of the forums where you can get comments on the design (you have to review 3 other sites first before you are eligible to place your site for review).

Thank you for your helpful advice, Paul. I just updated my site using your fixes. Here I am thinking I’m at Intermediate Level CSS, but that’s really a Beginner mistake! Especially the image border problem. Perhaps I overlooked that because it didn’t make any sense that it worked fine before before I swapped floats. I’m still scratching my head over that. Why is it that I didn’t have a problem with left border before?

If there’s anything you’d like to recommend about my site, please feel free to say so. I’m currently in the process of revamping my website. If you were a potential client, is there anything you are looking for that isn’t there? I’m going to try and rework the header. I wish there was a really tutorial on creating a really effective website header, but I can’t find it even afte searching google and youtube.

Thanks, Paul. I’ll see to it. ralph.m actually did tell me in my official review back in March to change that to:

  width: 850px;
  margin: 30px auto;
  

I just failed to update it to his recommendation. So I have your changes now or his. It might not matter pretty soon. I might be changing up the layout a bit. I will post another review request sooner or later once I make the final revamp changes. Thank you for your help.