What I tried to do...
Basically, I tried to make my navbar low-profile, but still dynamic, by using the styling below:
#nav-main a {
background: #333 url(../imgs/nav-slice.gif) repeat-x;
letter-spacing: 1px;
font-family: Verdana, Tahoma, Trebuchet MS, Arial;
font-size: 12px;
color: #aaa;
}
#nav-main a:hover {
background: #444 url(../imgs/nav-slice-hover.gif) repeat-x;
color: #eee;
}
Complete CSS, Quick-Click (<!-- m --><a class="postlink" href="http://www.gmclans.com/other/src/css/vector.css">http://www.gmclans.com/other/src/css/vector.css</a><!-- m -->)
Basically, that snippet would allow me to have the following, which views fine in firefox but displays terribly wrong in opera and IE.
The Stripped Example (<!-- m --><a class="postlink" href="http://www.gmclans.com/other/">http://www.gmclans.com/other/</a><!-- m -->)
Basically, a gradient navbar that uses a 65 byte repeated 1x30 background image for every link, and changes the background image for a particular link during a mouse-over.
One fix I know of is creating separate images for every single link, but this is something I wish to avoid at all costs, as it'll beef up the overall site-size tremendously. I like 65 bytes, but hate 65 kb ;PThe alt text for those spacer images should be blank.
Don't use tables for that. You should use a <ul> or <ol>.
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/taminglists/">http://www.alistapart.com/articles/taminglists/</a><!-- m -->
<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/listutorial/">http://css.maxdesign.com.au/listutorial/</a><!-- m -->
Why tables for layout is stupid (<!-- m --><a class="postlink" href="http://www.hotdesign.com/seybold/index.html">http://www.hotdesign.com/seybold/index.html</a><!-- m -->)
Why avoiding tables (for layout) is important (<!-- m --><a class="postlink" href="http://davespicks.com/essays/notables.html">http://davespicks.com/essays/notables.html</a><!-- m -->)
<!-- m --><a class="postlink" href="http://www.workingwith.me.uk/tablefree/why/">http://www.workingwith.me.uk/tablefree/why/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.sitepoint.com/article/tables-vs-css/">http://www.sitepoint.com/article/tables-vs-css/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.phrogz.net/CSS/WhyTablesAreBadForLayout.html">http://www.phrogz.net/CSS/WhyTablesAreBadForLayout.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.westciv.com/style_master/house/good_oil/dead_layout/Thanks">http://www.westciv.com/style_master/hou ... out/Thanks</a><!-- m --> a bundle for those links. I didn't know a lot of those reasons behind exactly why tables are worse, so I thought it'd be fine to use them.
I only switched to tables after originally using <div> and <ul> tags because the first time through, <div> and <ul> tags only made the overall site display even worse. (though I did not release a link to the complete site)
However, none of that solves my problem. Unfortunately, none are really even remotely close in helping me solve my problem.
Also, the <alt> text on the spacer images were not left blank because they were dividers. I wanted some visible text, even if the images didn't load.
Guess I'll just have to recode and see if I can fix it.Makeing tableless layouts takes practice.
Try adding display:block to those <a>s.
Basically, I tried to make my navbar low-profile, but still dynamic, by using the styling below:
#nav-main a {
background: #333 url(../imgs/nav-slice.gif) repeat-x;
letter-spacing: 1px;
font-family: Verdana, Tahoma, Trebuchet MS, Arial;
font-size: 12px;
color: #aaa;
}
#nav-main a:hover {
background: #444 url(../imgs/nav-slice-hover.gif) repeat-x;
color: #eee;
}
Complete CSS, Quick-Click (<!-- m --><a class="postlink" href="http://www.gmclans.com/other/src/css/vector.css">http://www.gmclans.com/other/src/css/vector.css</a><!-- m -->)
Basically, that snippet would allow me to have the following, which views fine in firefox but displays terribly wrong in opera and IE.
The Stripped Example (<!-- m --><a class="postlink" href="http://www.gmclans.com/other/">http://www.gmclans.com/other/</a><!-- m -->)
Basically, a gradient navbar that uses a 65 byte repeated 1x30 background image for every link, and changes the background image for a particular link during a mouse-over.
One fix I know of is creating separate images for every single link, but this is something I wish to avoid at all costs, as it'll beef up the overall site-size tremendously. I like 65 bytes, but hate 65 kb ;PThe alt text for those spacer images should be blank.
Don't use tables for that. You should use a <ul> or <ol>.
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/taminglists/">http://www.alistapart.com/articles/taminglists/</a><!-- m -->
<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/listutorial/">http://css.maxdesign.com.au/listutorial/</a><!-- m -->
Why tables for layout is stupid (<!-- m --><a class="postlink" href="http://www.hotdesign.com/seybold/index.html">http://www.hotdesign.com/seybold/index.html</a><!-- m -->)
Why avoiding tables (for layout) is important (<!-- m --><a class="postlink" href="http://davespicks.com/essays/notables.html">http://davespicks.com/essays/notables.html</a><!-- m -->)
<!-- m --><a class="postlink" href="http://www.workingwith.me.uk/tablefree/why/">http://www.workingwith.me.uk/tablefree/why/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.sitepoint.com/article/tables-vs-css/">http://www.sitepoint.com/article/tables-vs-css/</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.phrogz.net/CSS/WhyTablesAreBadForLayout.html">http://www.phrogz.net/CSS/WhyTablesAreBadForLayout.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.westciv.com/style_master/house/good_oil/dead_layout/Thanks">http://www.westciv.com/style_master/hou ... out/Thanks</a><!-- m --> a bundle for those links. I didn't know a lot of those reasons behind exactly why tables are worse, so I thought it'd be fine to use them.
I only switched to tables after originally using <div> and <ul> tags because the first time through, <div> and <ul> tags only made the overall site display even worse. (though I did not release a link to the complete site)
However, none of that solves my problem. Unfortunately, none are really even remotely close in helping me solve my problem.
Also, the <alt> text on the spacer images were not left blank because they were dividers. I wanted some visible text, even if the images didn't load.
Guess I'll just have to recode and see if I can fix it.Makeing tableless layouts takes practice.
Try adding display:block to those <a>s.