[css-d] Navigation
Hello everyone I am new!
I am having problems with the last tab on a navigation bar. For some reason
I can´t make it fit with the light blue line above it and I am stuck as to how
to do it. Also the navigation bar doesn´t show up in Netscape 4.78 (no Flash)
with Windows 2000 Professional and the thing just goes crazy with Explorer 4.0
(no Flash) Windows 98. I imagine that the problem is that they are too old so I
won´t worry that much about them. What can I do to make the navigation line up?
Thanks
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd;
HTMLHEAD
META http-equiv=Content-Type content=text/html; charset=utf-8
STYLE type=text/css
UL {
LIST-STYLE-TYPE: none
}
LI {
LIST-STYLE-TYPE: none
}
A {
COLOR: #7f99ae; TEXT-DECORATION: none
}
#topnav {
BORDER-TOP: #d8e1e9 4px solid; MARGIN: 9px 0px 0px
}
#topnav LI.l {
WIDTH: 20px
}
#topnav LI {
DISPLAY: inline; BACKGROUND: #849eb3 no-repeat left top; FLOAT: left; WIDTH:
85px; HEIGHT: auto
}
#topnav LI SPAN.last-tab {
DISPLAY: inline; BACKGROUND: #849eb3 no-repeat left top; FLOAT: left; WIDTH:
80px; HEIGHT: auto
}
#topnav A {
BORDER-RIGHT: #d8e1e9 1px solid; DISPLAY: block; BACKGROUND: no-repeat left
top; FONT: 11px/20px tahoma, arial; WIDTH: 85px; COLOR: #fff; TEXT-ALIGN: center
}
#topnav A:hover {
BACKGROUND: #fcda2e no-repeat left top; TEXT-DECORATION: none
}
#topnav A.selected {
BACKGROUND: #fcda2e no-repeat left top; TEXT-DECORATION: none
}
#width {
MARGIN-LEFT: auto; WIDTH: 882px; MARGIN-RIGHT: auto; TEXT-ALIGN: left
}
/STYLE
/HEAD
BODY id=body
DIV id=width
UL class=clearfix id=topnav
LIA title= href=index.cfmHome /A/LI
LIA title= href=About/A /LI
LIA title= href=Shops/A /LI
LIA title= href=Entertainment/A /LI
LIA title= href=Malls/A /LI
LIA title= href=Environment/A /LI
LIA title= href=Local/A /LI
LIA title= href=Information/A/LI
LIA title= href=Contact Us/A /LI
LI class=lA href=Login/A/LI
/UL/div
You
snooze, you lose. Get messages ASAP with AutoCheck
in the all-new Yahoo! Mail Beta.
http://advision.webevents.yahoo.com/mailbeta/newmail_html.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] How to view someone else's CSS source?
I'm new to CSS, but enjoying the CSS paradigm tremendously. While it's easy to view the HTML source behind any webpage, how does one view the CSS markup in external style sheets that renders the page? If there are no built-in tools in browsers that allow you to view the CSS source, what about, say, a Perl or Python script that allows it? Thanks in advance. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] How to view someone else's CSS source?
On 25/05/07, Jukka K. Korpela [EMAIL PROTECTED] wrote: On Thu, 24 May 2007, Forafo San wrote: I'm new to CSS, but enjoying the CSS paradigm tremendously. While it's easy to view the HTML source behind any webpage, how does one view the CSS markup in external style sheets that renders the page? That's rather awkward, so if possible, download and install the Web Developer Extensions to Firefox, from http://chrispederick.com/work/webdeveloper It's a great tool that lets you study (and modify) many aspects of a document. Select CSS/View CSS (or ) to see the stylesheets. I'd also get the Firebug extension, it allows you to select an element on the page and view its current style attributes (including those set by javascript)oh and it does a few other things as well ;-) http://www.getfirebug.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Centering a floating list.
Hi, sorry i see now what you are trying to do, by wanting to center
the list itself as well.
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
head
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1
titleUntitled Document/title
style type=text/css
.mpl {
float:left;
display: block;
text-align:center;
font-size:0.9em;
padding-right:1em;
}
.mpl strong {
font-size:1.3em;
display:block;
}
.last {
padding:0;
}
/style
/head
body
div style=margin:0 auto; text-align:center; class=list
div style=display:block; text-align:center;strongCenter |
Center/strong/div
ul style=width:350px; margin: 0 auto; border: 1px solid black;
li class=mpl1 - 14br /strong$6.62/strong/li
li class=mpl15 - 49br /strong$5.00/strong/li
li class=mpl50 - 199br /strong$3.76/strong/li
li class=mpl last200+br /strong$3.38/strong/li
/ul
/div
/body
/html
I added some code to the listing actually, just margin: 0 auto and a
border to see how far the list reaches out. This displays centered in
IE7,IE6,FF,Safari,Opera.
--
So long, and thanks for all the fish!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] How to view someone else's CSS source?
On Thu, 24 May 2007, Forafo San wrote: I'm new to CSS, but enjoying the CSS paradigm tremendously. While it's easy to view the HTML source behind any webpage, how does one view the CSS markup in external style sheets that renders the page? You could view the HTML source, find the referring link elements, pick up the URLs, and convert them to absolute URLs, then write the URLs in the browser's address line. That's rather awkward, so if possible, download and install the Web Developer Extensions to Firefox, from http://chrispederick.com/work/webdeveloper It's a great tool that lets you study (and modify) many aspects of a document. Select CSS/View CSS (or ) to see the stylesheets. -- Jukka Yucca Korpela, http://www.cs.tut.fi/~jkorpela/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Styling OL
I have an ordered list, and I want to style the numbers differently to the text. Is this possible? Ie: I want the numbers large and blue, and the text to be small and black. Joanne __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Styling OL
On Fri, 25 May 2007, Joanne wrote:
I have an ordered list, and I want to style the numbers differently to the
text. Is this possible?
Ie: I want the numbers large and blue, and the text to be small and black.
I'm afraid there is no direct way to achieve that, since the numbers are
effectively treated as anonymous parts of li elements, as far as styling
is considered.
However, this implies that you can circumvent the restriction by adding
extra markup for li contents. For example, if you write
lidiv class=lilist item contents/div/li
instead of the natural lilist item contents/li, you can set e.g.
li { font-size: large; color: blue; blackground: white; }
.li { font-size: medium; color: black; blackground: white; }
That is, the properties that you want for the numbers are assigned to the
li elements but overridden for the element that contains the list item
proper. Note: if you set the font-sizes using % or em, remember the
cumulative effect. For example, if you set font-size: 150% for li, you
need to set font-size: 66.67% for .li in order to make the list item
content appear in normal (medium) font size.
--
Jukka Yucca Korpela, http://www.cs.tut.fi/~jkorpela/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Conditional Statement
Ingo Chao wrote: david wrote: James Gadrow wrote: david wrote: Vicki Stebbins wrote: ... !--[if lt IE 7] Hmmm, that's saying If you're IE version LESS THAN 7, pay attention to this style. So IE6, IE5.5, IE5 are all seeing that style - while IE7 is NOT. What david's trying to say is use !--[if IE7] instead :p the 'lt' stand for 'less than' as david pointed out. Thanks, I couldn't remember the CC to target only IE7. #-/ There has to be a blank between IE and the version number. !--[if IE 7] ![endif]-- http://msdn2.microsoft.com/en-us/library/ms537512.aspx Ingo D'oh! Didn't even realize that my space obviously didn't register. Thanks for pointing it out Ingo! Could have frustrated the OP to no end :) -- Thanks, Jim __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Got It! - png fix
I found a website with an easy version of the IS png fix
http://bjorkoy.com/past/2007/4/8/the_easiest_way_to_png/ - an easy
interpretation
That site sent me to the originators site...
http://www.twinhelix.com/css/iepngfix/
..and I used one of the versions he suggested (below). The only other thing
needed was a blank gif and an .htc file which both of which he was nice enough
to offer on download.
*{ behavior: url(iepngfix.htc); }
Kirsten
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Centering a floating list.
I'm not sure if we still have a misunderstanding or if you pasted the wrong code, but that didn't work :) Basically, the numbers should be centered to the | which is in Center | Center Right now, it's shifted way over to the left, in FF and IE7. -Original Message- From: Melianor [mailto:[EMAIL PROTECTED] Sent: Friday, May 25, 2007 2:00 AM To: Jon Hughes Hi, sorry i see now what you are trying to do, by wanting to center the list itself as well. [[ code ]] I added some code to the listing actually, just margin: 0 auto and a border to see how far the list reaches out. This displays centered in IE7,IE6,FF,Safari,Opera. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Overflow bug?
Hi I've got a flash movie as a header in my three column container layout which I want to set overflow:hidden when the page is resized so it doesn't blow out of the side of the page. I've set overflow:hidden on all containers that the flash movie would push past - it works superbly in all IE versions, but not in Firefox/Opera/NS, etc... Is there a known problem with overflow:hidden? Thanks This message has been scanned for malware by SurfControl plc. www.surfcontrol.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] How to center the entire page
I am looking to have my page evenly centered on the screen. It is currently on the left side of the screen. Here is the link to my site http://www.precisemessenger.com/private/help1.html I would like it to have two even spaces on both sides of the page, here is an example http://www.precisemessenger.com/private/sample.gif Any help would be great. Thanks, Kevin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Different ways of doing the same thing
Les Mizzell wrote:
It's always interesting to look at other folks stuff. I just inherited a
site, and in looking at their CSS, the main div is listed thusly:
#pageWrapper {
width:760px;
position:absolute;
left:50%;
margin-left:-380px; }
Where I would have just done:
#pageWrapper {
width:760px;
margin: 0 auto 0 auto; }
Any advantage of doing it the first way?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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/
Well, it won't confuse a browser that won't center with margin: auto
(such as IE 7 in quirks mode). And for some reason they're taking the
page out of the normal flow so maybe they had a reason for that? Other
than that, I can suggest that you could also do it as:
#pageWrapper {
width: 760px;
margin: 0 auto; }
Which saves a few more bytes of data which means faster download times
for your clients, sure not by much, but each optimization is still an
improvement :)
--
Thanks,
Jim
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] How to view someone else's CSS source?
I'm new to CSS, but enjoying the CSS paradigm tremendously. While it's easy to view the HTML source behind any webpage, how does one view the CSS markup in external style sheets that renders the page? If there are no built-in tools in browsers that allow you to view the CSS source, what about, say, a Perl or Python script that allows it? Thanks in advance. My first post to the list and hopefully a helpful one. Its a good question and one I personally haven't found a really elegant solution for! I tend to use FF and the Web Developer Toolbar extension (http://chrispederick.com/work/web-developer/) which allows you to View CSS or indeed edit the CSS live through its CSS menu. Alternatively I view source of the page find the style sheet declaration and then append that to the URL of the page this normally serves up the plain text CSS file. The toolbar is far the simplest way but offers no code highlighting etc not a problem for some but I'm a sucker for a bit of highlighting! HTH Andy __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Different ways of doing the same thing
It's always interesting to look at other folks stuff. I just inherited a
site, and in looking at their CSS, the main div is listed thusly:
#pageWrapper {
width:760px;
position:absolute;
left:50%;
margin-left:-380px; }
Where I would have just done:
#pageWrapper {
width:760px;
margin: 0 auto 0 auto; }
Any advantage of doing it the first way?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Different ways of doing the same thing
#pageWrapper {
width:760px;
position:absolute;
left:50%;
margin-left:-380px; }
Where I would have just done:
#pageWrapper {
width:760px;
margin: 0 auto 0 auto; }
Without seeing the rest of the page or style sheet, my first guess
would be they were attempting to center the div in IE5 and IE6 in
quirks mode, which don't calculate the auto value for margins. Or if
there was some other reason the wrapper needed to be removed from the
normal flow by positioning it, if it needed to overlap other elements
for example.
But it's also just as likely that whoever authored that rule simply
didn't know about margin: 0 auto;
--
Craig, www.focalcurve.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] How to center the entire page
jana coyle wrote: I am looking to have my page evenly centered on the screen. It is currently on the left side of the screen. Here is the link to my site http://www.precisemessenger.com/private/help1.html I would like it to have two even spaces on both sides of the page, here is an example http://www.precisemessenger.com/private/sample.gif Any help would be great. Thanks, Kevin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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/ Here's a link that's short and to the point: http://bluerobot.com/web/css/center1.html HTH! -- Thanks, Jim __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Column Alignment in IE6
Hi List TGIF. Hope your week has been better than mine. This page which has three columns (original design is different on every page). Aligns on FF and IE7 vertically with the grey spacer at the top right but on IE6 it is aligned about 10px to the left. In addition, in FF the aboutr div is dropping below the centre col. Any help would be gratefully received. Ian This e-mail contains information which is confidential and may also be privileged. It is for the exclusive use of the intended recipient(s). If you are not the intended recipient(s) please note that any form of, distribution, copying or use of this e-mail or the information in it is strictly prohibited and may be unlawful. If you have received this in error please inform us at the above address then delete the e-mail and destroy any copies of it. Thank you. No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.467 / Virus Database: 269.8.0/817 - Release Date: 24/05/2007 16:01 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] IE7 changes size of div
I have a problem with IE7 rendering the code below differently.
Please take a look at image files illustrating the issue at
http://www.flickr.com/groups/[EMAIL PROTECTED]/
Here is my CSS
form input.submit {
padding:3px 8px;
border:1px dotted #787860;
vertical-align:middle;
background:#EDEDD5;
color:#787860;
font:bold 80%/1.3em Verdana,Sans-serif;
text-transform:uppercase;
cursor:pointer;
}
p input.submit {
font-size:100%;
vertical-align:middle;
}
Any ideas how I can make the submit button appear in IE7 just like it
does in FireFox?
Thanks a bunch for any help!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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] Background image in IE 7 and IE 6 not displaying.
I am having the hardest time getting a background image to display in a project I am working on. The image in question is a gray divider line to the right of the left sidebar. I have tried everything I can think of and I have searched everywhere to try and find a solution to the issue. I am missing something, but I just can't see what. You can see the code here: http://orcas.purebluedesign.com/Step2/ The CSS is here: http://orcas.purebluedesign.com/Step2/css/ sp_default.css ANY suggestion is welcome at this point. Thanks. The document can be seen at: David Merwin [EMAIL PROTECTED] 541-335-1832 cell 541-255-2228 skype http://www.davemerwin.com http://www.purebluedesign.com http://www.betachurch.org http://www.agiprofessional.com LinkedIn: http://www.linkedin.com/in/merwin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- 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] Different ways of doing the same thing
Hi Liz, I think the code you looked at centers the wrapper...,I'm not sure
that your code does that.
Ernie.
From: Les Mizzell [EMAIL PROTECTED]
To: css-d@lists.css-discuss.org
Subject: [css-d] Different ways of doing the same thing
Date: Fri, 25 May 2007 11:30:13 -0400
It's always interesting to look at other folks stuff. I just inherited a
site, and in looking at their CSS, the main div is listed thusly:
#pageWrapper {
width:760px;
position:absolute;
left:50%;
margin-left:-380px; }
Where I would have just done:
#pageWrapper {
width:760px;
margin: 0 auto 0 auto; }
Any advantage of doing it the first way?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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/
_
Like the way Microsoft Office Outlook works? Youll love Windows Live
Hotmail.
http://imagine-windowslive.com/hotmail/?locale=en-usocid=TXT_TAGHM_migration_HM_mini_outlook_0507
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- 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/
