Re: [css-d] top banner image and link - button loosing borders

[MaryES]

> Do you mean too wide?
Yes

>Don't forget to include borders, margins & padding in your math.
>&
> Temporarily give each div a separate background color, to make it easier
> to visualize just what's happening with each div and its margin and
> padding.

The reason I was off mathmatically is due to the #leftnav that sits in the 
left margin of #content. Used the Web Developer to straighten things up.

> Your 50em overall width means at 800x600 a user with the browser default
> default font size will have a horizontal scroll. Cutting back by 2em
> fixes it.
>&
> "margin: .5em 1em .5em 1em;" is the same thing as "margin: .5em 1em;".


Thank-you, great tips.

The only problem left that I can see is in #button that sits in #leftnav.
There is a light blue border that divides the buttons.  In Netscape this 
line disappears between 3 of the 10 buttons.  The different shades of blue 
rollover does work within each button.

Has anybody come up with this problem?
The code is below.
The web site is: http://trisms.com/New/Max.html
Mary

#leftnav
{
float: left;
width: 7.5em;
margin: 0;
padding: 1em .5em;
}

#button {
 border-right: 1px solid #000;
 margin-bottom: 1em;
 font-size: 90%;
 background-color: #90bade;
 color: #333;
 }

#button ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
  }

#button li {
  border-bottom: 1px solid #90bade;
  margin: 0;
  }

#button li a {
  display: block;
  padding: 5px 5px 5px 0.5em;
  border-left: 10px solid #1958b7;
  border-right: 10px solid #508fc4;
  background-color: #2175bc;
  color: #fff;
  text-decoration: none;
  width: 100%;
  }

html>body #button li a {
  width: auto;
  }


#button li a:hover {
  border-left: 10px solid #1c64d1;
  border-right: 10px solid #5ba3e0;
  background-color: #2586d7;
  color: #fff; 


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] top banner image and link - Loosing css on back click

[MaryES]

>>> This link will take you to my new work up.
>>> http://www.trisms.com/New/Max.html
>>> CSS: http://www.trisms.com/New/2column.css
>
> Current view: http://mrmazda.no-ip.com/SS/maryes2.jpg
>
> Needs #leftnav & #rightnav widths and margins on #content changed from
> px to ems. Try around 9-10 to start with. There seems to be no purpose
> setting a width on #button, but I'm only looking in Firefox. Font-family
> in #button is superfluous, as it is inheriting the same thing from the 
> body.

Felix, I made your recommended changes. All the px references have been 
changed to em.  You only recommended the #left nav and content to be 
changed, but made everything else consistent, except #buttons borders...it 
is still called in px (the width has been deleted).

  I have downloaded Web Developer and made adjustments and saved them to my 
css.  I am baffled, that the #top does not match #leftnav and #content 
mathmatically.  Do you know why? If I make them mathmatically correct, the 
top is too long.

CC and Ingo, I have changed the header to contain the graphic(which I call 
in the css and have shrunk) and the Rated #1 link.  Seems to be working 
well.

If any of you have time, please take a look and see what you think.

-->New problem:
When I click the Rated #1 link and then hit the 'back' button, my Max.html 
poage looses it's css.  I have tried linking it to older versions of the 
css.  I have printed off the code for New/2column.css and do not see 
anything unusual.

I am hoping this is a common occuance and one of you can tell me what I am 
doing to cause this.  This is how I link the style sheet to the html...
 

TRISMS Curriculum
@import "2column.css";



Thank-you,
Mary


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] top banner image and link - trisms

[MaryES]

Hi Felix,
I do have Firefox Web Developer.  I use it to validate my pages.

I continued to have problems with the rightnav, so I have gone down to 2 
columns.
http://www.trisms.com/New/Max.html
http://www.trisms.com/New/2column.css

I will try your ideas on changing the widths and margins to ems, and get 
back with you.
Thank-you for your time and help,
Mary 


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] top banner image and link

[MaryES]

I am working up a new look for an old 200 page site with css.
Old site here (it's a mess): http://trisms.com

This link will take you to my new work up.
http://www.trisms.com/New/Max.html
CSS: http://www.trisms.com/New/3column.css

Seems like it validates fine.  (I don't have all the links active)

What I am trying to do that has me baffled is putting a link in the top 
banner to the far right of the image.  I want it to say: Rated #1 and then 
go to the Awards page.

Setting the div to float right didn't work.

Can anybody give me a clue?

Thanks,
Mary


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/