[css-d] General question on tables
I have a general question on tables. I am noticing many, many web sites out there are still using tables...particularly web sites, such as Monster.com that have multiple blocks of content. I have eliminated tables from all my web sites and use float for blocks of text, but my websites are fairly simple. In looking for freelance web design positions, I have noticed that the more complex websites that the clients reference (as to the type of site they are looking for) use tables. So, are tables totally taboo for complex, block-style sites? If so, why? They certainly would be a lot easier than trying to use float for multiple blocks of contentI have problems getting the floats to work the same between browsers. I am also noticing that lots of designers appear to design a page of graphics in Photoshop, then slice it up and use html area coordinates to arrange all the pieces in a table acording to area tags.This definitely allows for more creative web site designdoes anyone have any opinions on this method? If I do use tables to prepare mulitple-block type sites, I wouldn't want to do the whole site as table, just the various blocks. Could someone let me know the best way to do these types of sites? Debbie __ 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] General question on tables
> Please, Debby, not again tables vs CSS! > > http://css-discuss.incutio.com/?page=TablesVsDivs Uh-oh, it appears I may have opened up an old can of worms here...if so I truly apologize...Thanks for the link and the info Christian, and for your info as well Tom...I will just refer to that... Debbie __ 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] Horizontal menu problem in IE
Would someone be able to tell me why this horizontal menu css looks fine in Firefox and Opera, but not in IE? http://www.figureskatersonline.com/znew/about.html http://www.figureskatersonline.com/znew/stylesheets/menu_B.css Thanks! Debbie __ 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] Copyright block not extending in Firefox and Opera
Okay, one more thing with this layout...everything looks fine now in IE but the copyright block doesn't extend all the way over in Firefox and Opera. I set the copyright div id to 100% width so I am not sure why this is happening: http://www.figureskatersonline.com/znew/about.php http://www.figureskatersonline.com/znew/stylesheets/import.css I have a feeling I will go "duh" when I hear the solution ;o! Debbie __ 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] fluid layout
Hi, I am trying to give this site a fluid look rather than in a container (per the client's request)...I removed the container and for a time, the content and copyright were fluid (stretched across the screen) but somehow it has gone back to the container look (see the block outline in Firefox) even though I have removed the container! I still have the settings for the content, menu, and copyright set to percentages. Also, even when it did look fluid, the banner background (set to repeat-x) did not go all the way across. I have validated everything. The person who started this used layers, which I don't understand but have left in...perhaps these are causing the problem? http://www.figureskatersonline.com/znew/about.php http://www.figureskatersonline.com/stylesheets/main.css http://www.figureskatersonline.com/stylesheets/import.css http://www.figureskatersonline.com/stylesheets/menu.css Am really stumped here! Debbie __ 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] Yellow input fields
Would someone be able to tell me why these input fields have turned yellow...this just happened...its been looking fine for months but today they are yellow. http://www.figureskatersonline.com/parkerpennington/contact.php http://www.figureskatersonline.com/parkerpennington/css/parker_form.css Debbie __ 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] Yellow input fields
> My guess is that you have turned on AutoFill in your Google Toolbar. Go > into > the Settings dialog for the Google Toolbar and turn off AutoFill, then > reload the page and you should see what you expect. Thanks so much to all of you who helped me identify the problem here...I have never seen this with Google before but had to reinstall my Google bar yesterday so apparently that's what is happening... Debbie __ 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] Image links shifting in FF when clicked
Would someone be able to tell me why when, in Firefox, the thumbnails floated to the right on this page shift to the right when clicked? Everything looks fine in IE and Opera. http://www.drkdesign.com/portfolio.php http://www.drkdesign.com/drk_css/drk_import.css Thanks! Debbie __ 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] breaking up thumbnails into separate rows
I am setting up a very simple website for my portfolio that started out as a
class project for an online CSS class. I set up thumbnails on this page
according to how we'd been taught in class but I would like them to be on a
separate row for each header category listed. I have put the thumbnails for
each category between their own division tags but that does not seem to be
working. The page looks the worst on Firefox. I am really stumped on this...can
someone help me out?
http://www.drk-writing.com/debscards/debscards2.htm
Here's the CSS code I'm using for the thumbnails:
.thumbnail {
float: left;
height: 75px;
border: 1px solid #590F81;
margin: 0 12px 12px 0;
padding: 5px;
text-align: center;
font-family: 'Comic Sans MS', sans-serif;
font-size: 12px;
color: #000;
}
Thank you!
Debbie
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Text shifting to the left in Opera and Firefox
I have made up this site to display my computer graphics in my portfolio. However, I am having a problem with the text shifting to the left in Opera and Firefox (yet it looks fine in IE). Does anyone have an idea of how I might prevent this from happening? Here's the link and stylesheet. http://www.drk-writing.com/artwork/ http://www.drk-writing.com/artwork/artwork.css Thanks! Debbie __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] One more...server descrepancies
I have a site that I maintain but that is uploaded on someone else's server (I have to send her updates...she doesn't have ftp uploading capabilities). When I upload it onto my server, everything looks fine but when she puts it on hers for some reason, some of the styles don't seem to be applying (particularly in the footer and on the Past Events page). Does anyone know how we could remedy this situation? Here's the site on my server: http://www.drk-writing.com/northwesternesse/ Here it is on her server (see the thumbnails on the Past Events page, and the footer) http://www.northwesternesse.com Here's my stylesheet: www.drk-writing.com/northwesternesse/nwe.css That should be it for now...thanks!! Debbie __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Server discrepancy resolved
Hi, I am brand new to this board and just posted three messages, the last of which was entitled "One more...server descrepancies" It appears that this problem has been resolved on the other person's server...though I'm not sure how. So you can ignore this message (unless you might have some insight as to why the styles wouldn't have been applying to the thumbnails and footer). Debbie __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] breaking up thumbnails into separate rows
Matt and Ian, thank you both for your comments and suggestions! I thought
I'd post to both of you together to reduce list clutter. Thank you both for
writing me directly, so that I didn't have to wait for my digest to come
tomorrow to see your replies :)
Matt, I did indeed forget about needing a width declaration when using
floatbut I think the thing that did it was adding a clear: both to the
headers. That split the thumbnail rows just fine :) I am still a bit fuzzy
on when I need to use clear
Ian, you actually caught something that was incorrect as well...I actually
wanted to put all four categories of card thumbnails between their own
division tags, but I had missed some! Actually now that the problem is
resolved, I may see if removing those makes any difference...I probably
don't need them now that I have added clear: both to the h3 tags in the
stylesheet.
Unfortunately this page is still messed up in Firefox (as mine often
are)I have to make some changes to the thumbnails but when I get that
done, I'll post the latest version to see if I can get the Firefox issues
worked out.
Debbie
Debbie
- Original Message -
From: "Matt Fitzwater" <[EMAIL PROTECTED]>
To: "Iorhael" <[EMAIL PROTECTED]>
Cc:
Sent: Wednesday, December 21, 2005 3:47 AM
Subject: Re: [css-d] breaking up thumbnails into separate rows
> You need to declare a width: on .thumbnail.
> after that you will probally need to add a clear:both on your h3 as well
> good luck
>
>
> Iorhael wrote:
>
>>I am setting up a very simple website for my portfolio that started out as
>>a class project for an online CSS class. I set up thumbnails on this page
>>according to how we'd been taught in class but I would like them to be on
>>a separate row for each header category listed. I have put the thumbnails
>>for each category between their own division tags but that does not seem
>>to be working. The page looks the worst on Firefox. I am really stumped on
>>this...can someone help me out?
>>
>>http://www.drk-writing.com/debscards/debscards2.htm
>>
>>Here's the CSS code I'm using for the thumbnails:
>>
>>.thumbnail {
>> float: left;
>> height: 75px;
>> border: 1px solid #590F81;
>> margin: 0 12px 12px 0;
>> padding: 5px;
>> text-align: center;
>> font-family: 'Comic Sans MS', sans-serif;
>> font-size: 12px;
>> color: #000;
>>}
>>Thank you!
>>
>>Debbie
>>
>>
>>
>>__
>>css-discuss [EMAIL PROTECTED]
>>http://www.css-discuss.org/mailman/listinfo/css-d
>>List wiki/FAQ -- http://css-discuss.incutio.com/
>>Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>.
>>
>>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] breaking up thumbnails into separate rows
> Maybe need to let us see whole stylsheet? > Ian Okay, I had to remove a couple of the thumbnails that were too wide...here's the finished version of the page and the stylesheets. It looks fine in IE, Opera, and Netscape now but not in Firefox. http://www.drk-writing.com/debscards/debscards2.htm http://www.drk-writing.com/debscards/debscardsbasic.css http://www.drk-writing.com/debscards/debscardsimport.css Debbie __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] One more...server descrepancies
> I don't see any discrepancies between the two. Is this happening in a > particular browser? I looked with FF 1.5. Or did you perhaps fix it? Zoe, I didn't fix this but I had just sent my friend some updates so apparently it "fixed itself" when she uploaded those...it did that once before but then I sent over another update of the stylesheet that was minor it went wacko again. What I don't understand is that the updates I am making to the stylesheet are minor and have nothing even to do with the elements that are being affected...so its real Russian roulette... Unfortunately, now though something else on that site has gone out of whack...the titles, arrows, and images in all the Fan Art pages for the site have aligned left, and the arrows are not even centered under the title. (The arrows are one of the few things that I have left in tables...I tried making them inline but that didn't make a difference in the alignment problem.) Anyway, when I saw that the problem I posted about originally was fixed I posted another message to let everyone know it was resolved. But since then I discovered the second issue with the Fan Art pages. Here is the link to the first one of those pages and my stylesheet. http://www.northwesternesse.com/FanArt/lt_sharpe.htm http://www.northwesternesse.com/FanArt/nwefanart.css Debbie __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Text shifting to the left in Opera and Firefox
> 1. Make sure you have the DOM Inspector installed in your copy of FF, and > if not, reinstall FF and select Custom installation to get it. I had not heard of this before...how would I check to see if this is installed? Always build for > FF first, then go back and tweak for IE if you need to. It takes much > less time and effort this way. So you are saying to design all pages according to Firefox? Unfortunately, IE is what comes up in Dreamweaver when checking a page. Most of my pages look the fine in IE and Opera and bad in Firefox so I have been avoiding it. I'll will give this a try alittle later. Debbie __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Text shifting to the left in Opera and Firefox
> Always build for FF first, then go back and tweak for IE if you need to. > It takes much less time and effort this way. A general question on building for Firefoxmy pages usually look similar in Opera, IE, and Netscape...but radically different in FirefoxSo I've been going more by what displays in Opera and IE. If I use Firefox as the starting point, won't they look out of kilter in the other three? Or do the others tend to fall in place once the page/site is set up according to FF? Debbie __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Text shifting to the left in Opera and Firefox
To allI just want to thank everyone who has jumped in to help me with my three site problems. I see I still have *tons* to learn and have to start working things around Firefox now and have some things to fix up or add to my FF browser. I may not get to all of it before we head out of town for Christmas but I'll have plenty to work on when I get back! --- if IE and Opera agree, and Firefox renders differently, then > there's a good chance that doctype is missing, thus all browsers are in > *old quirks mode*. I am not totally sure what you mean by doctype...unless you are talking about what goes at the top of the html page...someone else referred to that...but I haven't gotten to fixing it yet. If its something other than that, could you let me know where I would add it? Thanks! Debbie __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] breaking up thumbnails into separate rows
> You'll also need a clearing element, perhaps a div, between the close of
> the last thumbnail div, and the closing div tag (content?) that comes
> right before the nav div code.
Thanks for this Holly! I fixed the height and margins of the
thumbnails...(that was a "duh" for me on the height...yet it looked fine in
all the other browsers so I just thought it was mess-up in FF)
I added the .clear rule but it doesn't seem to be doing the trick in FF :(
Can you let me know if I've got it the right place? Here's the link:
http://www.drk-writing.com/debscards/debscards2.htm
And here's the clear div id that I added to my stylesheet:
#clear {
clear: both;
height: 0;
line-height: 0;
font-size: 1px;
}
Thanks!
Debbie
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] breaking up thumbnails into separate rows
> The selector/properties (style sheet stuff) are fine, the location of the > div is not. You'll need to move it above the closing div tag that is right > above it, following the closing div tag that is next to the words "Thank > You" - Well, I moved the div tag but its still not working :(...*tearing hair out here*g! (I fixed the doctype too.) http://www.drk-writing.com/debscards/debscards2.htm Debbie __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] breaking up thumbnails into separate rows
> ...which shows an ID selector for the clearer. However, you have -
> class="clear" - on the div in your HTML. Either change the selector to
> indicate a class, or change the class attribute to an ID attribute in your
> HTML. That should get things working.
ooops! Thanks for catching that! I started out setting the clear up as a
class, and then thought I'd try a division when that didn't work...but
forget to change the html tag. It looks great now in FF :) Thanks again :)
(After going round and round awhile trying to fix something, I have a
tendency to miss these dumb little things that I should catch right off.)
Now the only thing left is that the bottom links still aren't left aligning
in FF...they look fine in the others. I would think the clear id and the
clear declaration set here would set that straight, but its not :(
#nav ul {
clear: both;
list-style-type: none;
text-align: left;
margin-left: 10px;
}
http://www.drk-writing.com/debscards/debscards2.htm
Debbie
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Getting links to left align in FF
I posted about this site last night, but thanks to Holly and others I 've
gotten most everything straightened out...the problem I have still having not
being able to get the bottom links to align left on pages 1 and 2 in Firefox (I
have centered them for page 3). Holly, I realize that this most likely not due
to needing a clear condition after all since it occurs on the page 1 as well as
the thumbs page (page 2). Though just to be on the safe side, I did add a
division class of clear for the bottom links on both pages. The links look fine
in Opera and IE. I am stumped on this.
Here are the page links:
http://www.drk-writing.com/debscards/
(click the Flowers link at the bottom to get to page 2)
Here's the imported stylesheet:
#container {
background-color: #ABE2C4;
margin: 25px auto 25px auto;
padding: 25px;
width: 625px;
}
#content {
text-align: left;
width: 550px;
margin: 20px auto 20px auto;
padding: 25px;
border: 1px solid #0A7944;
}
#contentcenter {
text-align: center;
width: 550px;
margin: 20px;
padding: 25px;
border: 1px solid #0A7944;
}
/*Deb's Cards Header*/
#header {
margin-left: -15px;
}
/*First line and first letter*/
p:first-line {
font-variant: small-caps;
font-style: italic;
font-weight: bold;
text-transform: capitalize;
}
.firstltr:first-letter {
float: left;
font-family: Georgia, 'Times New Roman', serif;
font-size: 50px;
font-weight: bold;
padding: 5px 5px;
margin-right: 5px;
background: url(general/batiktile.gif) repeat;
border: 1px solid #590F81;
color: #DBC8F5;
}
/*home page card images*/
.imageone {
float: left;
border: 3px solid #590F81;
margin: 15px 15px 15px 0;
}
.imageone:hover {
float: left;
border: 3px solid #DBC8F5;
margin: 15px 15px 15px 0;
}
.imagetwo {
float: right;
border: 2px solid #590F81;
margin: 0 0 12px 12px;
}
.imagetwo:hover {
float: right;
border: 2px solid #DBC8F5;
margin: 0 0 15px 15px;
}
/*mother's day card zoom*/
.zoom {
margin: 10px 0px 10px 0;
border: 3px solid #590F81;
display: block;
width: 96px; /* show only thumbnail */
height: 75px;
background: url(images/cards/flowers/mothersday.jpg) no-repeat top left;
}
.zoom:hover {
margin: 10px 0px 10px 0;
border: 2px solid #590F81;
width: 300px; /* adjusting size to zoomed photo */
height: 236px;
background-position: 0 225px; /* move the image so only the big one shows */
}
/*card thumbnails*/
.thumbnail {
float: left;
width: 82px;
border: 1px solid #590F81;
margin: 0 10px 35px 0;
padding: 4px;
text-align: center;
font-family: 'Comic Sans MS', sans-serif;
font-size: 12px;
color: #000;
}
.clear {
clear: both;
height: 0;
line-height: 0;
font-size: 1px;
}
/*links and copyright - page 1*/
#nav ul {
clear: both;
list-style-type: none;
text-align: left;
margin-left: 10px;
}
#nav li {
display: inline;
padding: 0 10px 0 10px;
border-right: 1px solid #590F81;
}
#nav li.last {
border-right: none;
}
#nav li a:link, #nav li a:visited {
text-align: left;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
text-transform: capitalize;
color: #590F81;
}
#nav li a:visited {
color: #590F81;
text-decoration: underline;
}
#nav li a:hover {
color: #0A7944;
text-decoration: underline;
}
#copyright {
text-align: left;
margin: 0 0 0 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #590F81;
}
#nav ul.center {
clear: both;
list-style-type: none;
text-align: center;
margin-left: 10px;
}
#copyrightcenter {
text-align: center;
margin: 0 0 0 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #590F81;
}
/*form page*/
form {
margin: 0;
border: 1px solid #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #590F81;
color: #fff;
line-height: 150%;
width: 100%;
}
legend {
font-family: Georgia, 'Times New Roman', serif;
font-style: italic;
font-size: 14px;
background-color: #590F81;
color: #fff;
}
fieldset {
margin: 20px;
padding: 10px;
border: 1px solid #DBC8F5;
}
input, textarea, select {
background-color: #DBC8F5;
text-align: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
input:focus, textarea:focus, select:focus {
background-color: #ABE2C4;
color: #590F81;
}
input[type=submit], input[type=reset] {
margin: 15px;
padding: 3px;
width: 5em;
text-align: center;
border: 1px solid #000;
}
p.formleft {
color: #fff;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
}
p.formright {
color: #fff;
[css-d] Getting links to left align...resolved!
Regarding my last post about bottom links not aligning on one of my
sitesplease ignore...I had missed a fix that Holly suggestedI have made
that now and everythink looks good. Here's the fix in case anyone has a similar
problem:
#nav ul {
clear: both;
list-style-type: none;
text-align: left;
margin-left: 10px;
padding: 0; /* << add this <<< */
}
Debbie
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Alignment problem in IE
One final IE quirk to tweak.I have the content for this and other pages
specified so that the title, arrows, and art all center align. But its not
matching up in IE. Would this be another case of adding padding: 0 somewhere to
correct IE?
http://www.drk-writing.com/northwesternesse/FanArt/ab_samgift.htm
Stylesheet:
body
{ background-attachment: fixed;
background-color: #fff;
background-position: center;
text-align: center;
scrollbar-face-color: #030;
scrollbar-shadow-color: #66846A;
scrollbar-highlight-color: #66846A;
scrollbar-3dlight-color: #030;
scrollbar-darkshadow-color: #003300;
scrollbar-track-color: #fff;
scrollbar-arrow-color: #fff;
}
p {
font-family: 'Comic Sans MS', sans-serif;
font-size: 14px;
color: #000;
text-align: center;
}
h1 {
font-family: 'Comic Sans MS', sans-serif;
font-size: 16px;
text-align: center;
color: #030;
font-weight: normal;
}
.text {
text-align: left;
}
#box {
width: 740px;
margin: 10px auto 10px auto;
line-height: 115%;
text-align: left;
border: solid 1px #030;
color: #000;
}
#banner {
background-color: #030;
border-bottom: 1px solid #030;
width: 100%;
margin-bottom: 0;
}
/*top menu*/
#menu {
margin: 0 auto 0 auto;
padding: .25em 0 .25em 0;
border-bottom: solid 1px #030;
text-align: center;
width: 100%;
}
/*content for poems and art*/
#content {
padding: 1.5em 1.5em 2.5em 1.5em;
width: 30em;
margin: 0 auto 0 auto;
}
/*bottom links and copyright statement*/
#footer {
clear: both;
padding: .5em;
border-top: 1px solid #030;
text-align: center;
}
.navcopyright {
display: inline;
font-family: 'Comic Sans MS', sans-serif;
font-size: 10px;
line-height: 14px;
text-align: center;
color: #030;
}
/*left-align text for poems*/
.text {
text-align: left;
}
/*art nav arrows*/
img.arrow {
padding-left: .5em;
padding-right: .5em;
}
Is there a place that lists what fixes can be made in IE for different types of
problems?
This will just about do it for all the sites I'm working on...thanks again to
everyone for their abundance of help...I have been quite amazed at all the help
I've gotten...I've been wanting to clear some of these issues up for a while
now.
Thanks and Happy Holidays!
Debbie
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Content not centering in IE
Hi, I posted a few days before Christmas but with all the pre-Christmas busy-ness it most likely got overlooked. So I'm posting again now... I have set of pages in a subfolder on a site with their own stylesheet. The page contents center beautifully in Firefox and Opera, but not in IE (the content is set to 0 auto 0 auto). The elements center under each other but they are not centered in the middle of the page. I figure there's probably got to be a fix for this in IE. I am not at home at the present so I can include the link but not the stylesheet...however, I posted it on Wed or Thurs of last week. And if anyone here needs it, I will post it again as soon as I get back home tomorrow. Here is the link to main page...any of the text or image links on this page will lead to one of the pages in question. http://www.drk-writing.com/northwesternesse/fanart.htm BTW, I checked tried to check the Archives as this seems like a question that may have come up before, but the Archives button does not appear to be linked. Thanks! Debbie __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Content not centering in IE
This comment before the doctype: " ... throws IE6 into old 'quirks mode'. Other browsers won't react on
> such a comment, so they'll stay in 'standard compliant mode'. Thus, IE6
> won't react to 'margin: 0 auto 0 auto'.
>
> Solution:
> 1: get rid of the comment and give IE6 a chance. (IE5/5.5 will still
> need the fix in solution 2)
>
> 2: add: #box {text-align: center;} and all IE will center properly,
> regardless of mode.
George...thank you for catching that comment! That was definitely in the
wrong place. I redid the template and updated all the pages so that that
comment comes *after* the DocType.
However, despite the fact that I have indicated center alignment and auto
margins all the way through, the content for these pages is aligning left in
all three browsers now :( (IE, FF, Opera). So here is my stylesheet...would
you mind taking a look at it? I gave the #box id an alignment of center.
thanks!
Debbie
http://www.northwesternesse.com/FanArt/bk_sting.htm
A:link { text-decoration: underline; color:#33; } /*dk green*/
A:visited { text-decoration: underline; color:#990099; } /*purple*/
A:hover { text-decoration: underline; color:#009966; } /*green*/
A:active { text-decoration: underline; color:#009966; } /*green*/
body {
background-image: url(../NWEGraphics/nwelogobkgrd.gif);
background-attachment: fixed;
background-color: #fff;
background-position: center;
text-align: center;
scrollbar-face-color: #030;
scrollbar-shadow-color: #66846A;
scrollbar-highlight-color: #66846A;
scrollbar-3dlight-color: #030;
scrollbar-darkshadow-color: #003300;
scrollbar-track-color: #fff;
scrollbar-arrow-color: #fff;
}
p {
font-family: 'Comic Sans MS', sans-serif;
font-size: 14px;
color: #000;
text-align: center;
}
h1 {
font-family: 'Comic Sans MS', sans-serif;
font-size: 16px;
text-align: center;
color: #030;
font-weight: normal;
}
#box {
width: 740px;
margin: 10px auto 10px auto;
line-height: 115%;
text-align: center;
border: solid 1px #030;
color: #000;
}
#banner {
background-color: #030;
border-bottom: 1px solid #030;
width: 100%;
margin-bottom: 0;
}
/*top menu*/
#menu {
margin: 0 auto 0 auto;
padding: .25em 0 .25em 0;
border-bottom: solid 1px #030;
text-align: center;
width: 100%;
}
/*content for poems and art*/
#content {
padding: 1.5em 1.5em 2.5em 1.5em;
margin: 0 auto 0 auto;
}
/*art nav arrows*/
img.arrow {
padding-left: .5em;
padding-right: .5em;
}
/*bottom links and copyright statement*/
#footer {
clear: both;
padding: .5em;
border-top: 1px solid #030;
text-align: center;
}
.navcopyright {
display: inline;
font-family: 'Comic Sans MS', sans-serif;
font-size: 10px;
line-height: 14px;
text-align: center;
color: #030;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Content not centering in IE
George, You can ignore my previous message with the stylesheet...when I redid the templates for those pages I forgot to update the stylesheet link...I have done that now and everything is looking fine :) Thank you so much for the IE tips! Debbie __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Content shifting in IE
Is there any way, other tnan using absolute positioning, to keep content from
shifting downward in IE when the Favorites menu bar is displayed? If not, I'll
go with the absolute positioningbut I've got this positioned just how I
want it so I hate to change it to absolute unless I have to.
www.drk-writing.com
Here's the imported stylesheet:
#header {
width: 100%;
background-color: #000;
}
#sidebar {
margin-top: 0px;
float: left;
width: 159px;
background-color: #000;
}
#content {
margin-left: 185px;
width: 450px;
}
#content h1 {
margin-top: .7em;
margin-bottom: 15px;
}
/* Resume link, bottom links, copyright*/
#resumelink {
padding-top: 1em;
padding-bottom: 4em;
margin-left: 185px;
}
#footer {
margin-left: 185px;
width: 450px;
}
/*bullet list*/
ul {
list-style-type: none;
list-style-image: url(NewGraphics/purplebullet.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 14px;
color: #DFC0E1;
}
li {
padding-bottom: 8px;
}
/*bullet list for Portfolio listings*/
ul.docslist {
list-style-type: none;
list-style-image: url(NewGraphics/pdf_icon.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 14px;
color: #DFC0E1;
}
ul.weblist {
list-style-type: none;
list-style-image: url(NewGraphics/globe.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 14px;
color: #DFC0E1;
}
li.last {
padding-top: 0;
list-style-image: url(NewGraphics/pdf_icon.gif);
}
Thanks!
Debbie
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Content Shifting in IE
>The only thing that shifts is the "IE 3 Pixel Shift". This is documented through-out the web. This effect is when the page renders correctly in a standards-compliant browser (Mozilla Firefox) but is slightly off when viewed in IE. I am presuming this is the case. Do a google search for IE 3 Pixel Shift and you will have the technical answer to resolve this problem. Dan, thank you for this information...I changed all the ems to pixels but the problem remained...upon looking at it again realized that it was simply a width problem...I had not taken into account the sidebar width so made the width too long...(dh!) But, just the same, your information was very helpful and I will keep it mind for future reference. Thanks! Debbie __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Color for three-column layout
Hi, I working on a three-column layout but having trouble setting the color for
the left and right columns. I have been looking at several online tutorials and
it appears that I'm doing the CSS right, but the images aren't coming in for
the column backgrounds. When I put the background image for the left column in
the body rule, it looks great, but when I move it to the #left rule, it doesn't
come in. The image for the #right column doesn't come in regardless of where I
put the image for the #left rule.
I am using absolute positioning...is this something that requires using float
instead?
http://www.drk-writing.com/3columnlayout/
body {
margin: 0;
padding: 0;
text-align: center;
}
#banner {
background-image: url(images/daisiesbanner.jpg);
border-bottom: 10px solid #4B5957;
padding: .5em;
}
#left {
position: absolute;
top: 80px;
left: 0px;
width: 160px;
background: #fff url(images/sidebar1.gif) repeat-y top left;
}
#right {
position: absolute;
top: 62px;
right: 0;
width: 190px;
background-image: #fff url(images/sidebar2.gif) repeat-y top right;
padding-top: 20px;
}
#center {
margin: 0 190px 0 190px;
padding: 20px 20px 10px 5px;
border-right: 1px solid #4B5957;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 16px;
color: #000;
text-align: justify;
}
p.nav {
border-top: 1px solid #4B5957;
padding-top: 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #4B5957;
text-align: justify;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 30px;
color: #fff;
text-align: left;
font-weight: normal;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #374240;
text-align: left;
margin: 0;
padding: 0;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #374240;
text-align: left;
margin: 0;
padding: 0;
padding-top: 15px;
}
#banner h1 {
margin: 0;
padding: 0;
}
h1.opacity {
filter: alpha(opacity=80);
-moz-opacity: .80;
opacity: 0.80;
}
#right img {
padding: 4px;
background-color: #fff;
border: 1px solid #4B5957;
}
#right p {
margin: 15px 35px 15px 35px;
font-size: 10px;
line-height: 12px;
}
ul#nav {
list-style-type: none;
margin: 0;
padding: 0;
}
ul#nav a {
display: block;
background-image: url(images/grad1.jpg);
text-decoration: none;
padding: 5px;
width: 98%;
border-top: 1px solid #fff;
border-right: 1px solid #828282;
border-bottom: 1px solid #828282;
border-left: 1px solid #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #4B5957;
}
ul#nav a:hover {
background-image: url(images/grad2.jpg);
border-top: 1px solid #828282;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
border-left: 1px solid #828282;
color: #fff;
}
ul#nav li.last a {
background-color: #4B5957;
background-image: none;
border: 1px solid #4B5957;
}
#footer {
margin: 0;
padding: .15em 0 .15em 0;
background-color: #4B5957;
border-top: 1px solid #4B5957;
width: 100%;
}
#footer p {
text-align: center;
font-size: 10px;
line-height: 12px;
color: #BCDCD9;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] jumpy scrollbar in FF and Opera
Has anyone had a problem with the scrollbar being very jumpy and rough when scrolling in Firefox and Opera? I have a site where this is a real problem in Opera...it does it in Firefox too though not nearly as badly...and there's no problem at all in IE. www.drk-writing.com/northwesternesse.com I am just wondering whether it might have something to do with my css. Debbie __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Color for three-column layout
> Hi I faced the same problem this week, David Laakso pointed me here
> http://www.alistapart.com/articles/negativemargins/
> It describes a two column layout first but then goes on to add a third
> column. It might be just what your looking for...
>
> Best Regards
>
> Chris
Well, I'm half-way there! Chris, using the link you listed I got the image
for the right column to come in but not the left oneeverything looks
okay so I'm stumped.
I'm setting up the code a bit differently then that tutorial though ...using
absolute positioning so that the middle column collapses (I'm seeing this
referred to as the Holy Grail...am not sure why...fluid in the middle I
guess, like a cup ;o!). But since the right image sidebar image came in just
fine, I'm not sure that's what making the difference.
http://www.drk-writing.com/3columnlayout/
Here's the part of the stylesheet that applies:
body {
margin: 0;
padding: 0;
text-align: center;
}
#wrapper1 {
background: #fff url(images/sidebar1.gif) repeat-y left;
}
#wrapper2 {
background: #fff url(images/sidebar2.gif) repeat-y right;
}
#banner {
background-image: url(images/daisiesbanner.jpg);
border-bottom: 10px solid #4B5957;
padding: .5em;
}
#left {
position: absolute;
top: 80px;
left: 0px;
width: 160px;
}
#right {
position: absolute;
top: 62px;
right: 0;
width: 190px;
padding-top: 20px;
}
#center {
margin: 0 190px 0 190px;
padding: 20px 20px 10px 5px;
border-right: 1px solid #4B5957;
}
Debbie
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Color for Three-Column Layout
the right column has a bad declaration:
background-image: #fff url(images/sidebar2.gif) repeat-y top right;
should be
background: #fff url(images/sidebar2.gif) repeat-y top right;
and IIRC you can't declare a position for a repeating element...
the left column has no height beyond the navigation ul and isn't wide
enough for your image...
try adding borders to your columns to see where they are...
;o)
Hi Tony and others,
I had posted on my process last night last night just *before* I got this
message of course ;o! I have fixed the declarations...in fact, the color for
the right column came in just fine after that.
I fixed the background image widths as well. Your idea of adding borders on the
columns to see where I was at was brilliant, Tony! That really helped me sort
some things out.
However, I am still one column short...the left sidebar image *still *is not
coming in :(
http://www.drk-writing.com/3columnlayout/
Relevant CSS:
body {
margin: 0;
padding: 0;
text-align: center;
}
#wrapper1 {
background: #fff url(images/sidebar1.gif) repeat-y left;
}
#wrapper2 {
background: #fff url(images/sidebar2.gif) repeat-y right;
}
#banner {
background-image: url(images/daisiesbanner.jpg);
border-bottom: 10px solid #4B5957;
padding: .5em;
}
#left {
position: absolute;
top: 80px;
left: 0px;
width: 170px;
}
#right {
position: absolute;
top: 80px;
right: 0px;
width: 170px;
}
#center {
margin: 0 170px 0 190px;
padding: 0px 20px 20px 0px;
border-right: 1px solid #4B5957;
}
Debbie
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Color for Three-Column Layout - drk-writing
> David Laakso wrote:
>
>> Iorhael wrote:
>
>> >http://www.drk-writing.com/3columnlayout/
>
>> Either way, setting:
>> body { font: 100.01%/1.2 'Lucida Grande', 'Nimbus Sans', 'Luxi Sans',
>> Arial, sans-serif; }
>> and deleting *each and everyone* of those font-families, pixel
>> font-sizes, pixel line-heights, replacing justify /with/ left, and
>> changing the headers to percent for font-size-- just *starts* to
>> approach something readable(and zoomable cross-browser).
>
> http://mrmazda.no-ip.com/SS/iorhael1.jpg
>
> Debbie, everything David said, particularly px line-heights. Except,
> better yet, don't set any font-family on the body. Limit your family
> styles to headings and menus so that the main content text can work best
> for me and your other visitors. We already picked the size and family
> that works best for us. If you insist on making your page difficult
> overriding our carefully chosen defaults, we'll just do as many others
> do. Instead of zooming or squinting, we'll just hit the back button
> without giving your site any chance to do whatever is is you want it to
> do.
>
> Browser makers provide users with a preference adjustment precisely so
> that they can optimize to the size that best suits them. Your visitors
> don't appreciate web artists arbitrarily reducing text size to anything
> smaller than their choice, particularly those using web browsers with no
> zoom function that works on sites like yours that set text sizes and
> line heights in itty bitty px. Instead, defer to what your users prefer,
> leaving your content's P text unsized, or reinforcing it with an
> explicit font-size: medium. Too small text is the #1 complaint from web
> users: http://www.useit.com/alertbox/designmistakes.html
whoa!! I think I must have majorly missed something here! Let's back it up,
shall we? Please?
Okay, are you both saying that I shouldn't be using font families in my
style sheets at all? I've been setting fonts the way I learned in my two
online CSS classes. So reading these messages is a total surprise.
And I'm not **insisting** on anythingjust doing it the way I thought it
was done. So its better to use percentages for font size? And just not
specifying a font anywhere? With bad eyesite, I certainly understand people
wanting to zoom...I've just never done that on a browser but will certainly
start doing so.
so Felix and David, if you both could perhaps send me examples of exactly
what I should change ...I've already got to use percentages for fonts, and
no font families at all..what else?
Please be patient with me! I'm still fairly new to all this.I am wanting
to learn as much as I can and as fast as I can, but I respond much better to
suggestions that are given in a positive manner rather than in accusatory
tones. I realize there are folks on this list that have been doing this for
years and so this must all seem pretty basic, but you must have had to start
somewhere and learn all the same things I'm learning now at one time.
BTW, the original subject of this message...that is, the column layout, has
been resolvedit had nothing to do with the font settings...Holly pointed
it out in her latest message.
Thanks!
Debbie
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font Standards (Was: Color for Three-Column Layout)
Either way, setting:
> body { font: 100.01%/1.2 'Lucida Grande', 'Nimbus Sans', 'Luxi Sans',
> Arial, sans-serif; }
> and deleting *each and everyone* of those font-families, pixel
> font-sizes, pixel line-heights, replacing justify /with/ left, and
> changing the headers to percent for font-size-- just *starts* to approach
> something readable(and zoomable cross-browser).
> Best,
> ~davidLaakso
>
Okay, David, for the body font, could you explain why this is set to 100.01
and not just 100 %? Also what is the 1.2?
I am not familiar with this font-family either...is this a standard one to
use? Is Verdana, Arial, etc. not acceptable?
Thanks,
Debbie
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] ooops!
Hi, my apologies to Felix and this list... I responded a few minutes ago to a message that Felix sent and cc'd the list...and totally missed that it was sent privately. My boo-boo. Happy New Year! :) Debbie __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Font Issues (Was: Color for Three-Column Layout - drk-writing)
Here are my 'rules of thumb' for font issues. 1. For efficiency's sake declare it on the body and let it inherit through to the rest of the elements on the page. If an element needs a different font family, declare it in a selector for that element only. 2. Set the size to 100% so the user's default size choice is the baseline (using 100.01% gets around some order browser rounding errors). 3. Prefer flexible units like em or % for screen (keywords work ok too as long as you account for ie5). 4. The user is in total control and can override all your font settings at will. Keep in mind that there are multiple valid way to work with font issues. Every method has strengths and weaknesses. Thats why there are 'font wars'. The wiki is your friend. I go there first when I have a question because the answers are almost always there. Roger Thank you Roger! That sounds like a plan...I hate to not use any families or sizes at all but I do tend to repeat them so I'll clean that up. Your advice here is very helpful I had no idea there were "font wars". :o! Geesh, I still have a lot to learn! I'm still not sure how this whole thing degraded into font discussion...my original question was on something else entirely. Debbie __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Background color with image?
Is there any way to add a background color to a page that already has a background image? I want to put the background color around the container: www.drk-writing.com/northwesternesse/ Debbie __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background color with image?
hmmm...just tried that but it didn't work...what I am actually wanting is just the area outside the container box to be a different color...see link for example: http://www.maxdesign.com.au/presentation/process/example23.htm Is that possible? Debbie - Original Message - From: "Mike Soultanian" <[EMAIL PROTECTED]> To: "Iorhael" <[EMAIL PROTECTED]> Cc: Sent: Monday, January 02, 2006 2:25 PM Subject: Re: [css-d] Background color with image? > Yeah.. just set a background color on your body (an outer container div). > Now, if you want the background color to show through your little diamond > things, you'll need to make a transparency, making sure to use the > background color as the color you select for the transparency so it > aliases nicely. If you don't, you'll get halos around the graphics. > > There are plenty of articles regarding creating GIF transparencies in > photoshop on google. > > thanks, > Mike > > Iorhael wrote: >> Is there any way to add a background color to a page that already has a >> background image? I want to put the background color around the >> container: >> >> www.drk-writing.com/northwesternesse/ >> >> Debbie >> __ >> css-discuss [EMAIL PROTECTED] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Alignment problem - form/psuedoelements
Hi,
I have a form in which I wanted to change the properties for the p:firstline
pseudo-element, just for the form. However, when I added the :first-line
psuedo-element to the p.formleft and p.formright rules, the text centered,
despite my alignment designations. I would think that the text rules were
picking up the desgination for the container (which is centered) except that
they aligned just fine before I added the :first-line psuedo-element.
http://www.drk-writing.com/debscards/debscards3.html
/*form page*/
form {
margin: 0;
border: 1px solid #fff;
font: 90% Verdana, Arial, Helvetica, sans-serif;
background-color: #590F81;
color: #fff;
width: 100%;
}
legend {
font: 90% Georgia, 'Times New Roman', serif;
font-style: italic;
background-color: #590F81;
color: #fff;
}
fieldset {
margin: 20px;
padding: 10px;
border: 1px solid #DBC8F5;
}
input, textarea, select {
background-color: #DBC8F5;
text-align: right;
font: 90% Arial, Helvetica, sans-serif;
}
input:focus, textarea:focus, select:focus {
background-color: #ABE2C4;
color: #590F81;
}
input[type=submit], input[type=reset] {
margin: 15px;
padding: 3px;
width: 5em;
text-align: center;
border: 1px solid #000;
}
p.formleft:first-line {
color: #fff;
text-align: left;
font: 100% Verdana, Arial, Helvetica, sans-serif;
}
p.formright:first-line {
color: #fff;
text-align: right;
font: 100% Verdana, Arial, Helvetica, sans-serif;
font-variant: normal;
}
.center {
text-align: center;
}
Also, I need to make this form workable using cgi-script. I realize that this
is off-topic so all I will ask is if someone know a good tutorial, could you
let me know the link? I've been looking at different tutorials but am still at
a loss as to actually how to set this up.
Thanks!
Debbie
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Content problem in IE
Hi,
Last night I changed all my font sizes for my various sites to percentages.
However, in one site the content is now shifting downward in IE. I had posted
this same problem the other week with another site but was able to fix it by
shortening the content width. However, I have tried that here but to no avail
so I'm thinking it must be something else causing the problem. I made the font
size quite a bit bigger but I wouldn't think that would make a difference if I
keep the content width the same. I have tried using both pixels and ems for the
content. I have tried shortening the width for the menu too.
http://www.northwesternesse.com/microdor/journey.htm
p {
font-size: 80%;
}
#corner {
margin: 0;
padding: 0;
}
#header {
position: absolute;
top: 0;
left: 250px;
}
#sidebar {
float: left;
width: 250px;
}
#menu {
margin-left: 250px;
width: 95%;
}
ul {
list-style-type: none;
}
li.menu {
display: inline;
padding: 0 1.25em 0 0;
}
#content {
margin-top: 10px;
margin-left: 300px;
width: 24.5em;
text-align: center;
padding-bottom: 2.5em;
}
#footer {
clear: both;
margin-left: 340px;
width: 20em;
}
#footer p {
padding-bottom: .5em;
text-align: center;
font-size: 65%;
color: #ff9933;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Extra browzer space to the right
Am still tweaking this particular sitegot it to where I want it now, except
that I am wondering how I can eliminate all the extra space to the right...I
don't want users thinking they have to scroll sideways since there is nothing
there. The banner graphic at the top ends right after the "R" in Microdor. I am
not even sure this is CSS problem, so if its not, that's okay...we don't have
to discuss it here...However, if anyone thinks that tweeking the CSS may help,
please let me know:
Thanks!
Debbie
http://www.drk-writing.com/northwesternesse/microdor/
body {
margin: 0;
font: 100.01% Verdana, Arial, Helvetica, sans-serif;
line-height: 110%;
color: #C2B490;
background-attachment: scroll;
scrollbar-face-color: #00;
scrollbar-shadow-color: #C2B490;
scrollbar-highlight-color: #00;
scrollbar-3dlight-color: #C2B490;
scrollbar-darkshadow-color: #00;
scrollbar-track-color: #00;
scrollbar-arrow-color: #C2B490;
}
p {
font-size: 80%;
}
ul {
list-style-type: none;
}
li.menu {
display: inline;
padding: 0 1.25em 0 0;
}
#corner {
position: absolute;
top: 0;
left: 0;
}
#header {
position: absolute;
top: 0;
left: 250px;
}
#sidebar {
position: absolute;
top: 153px;
left: 0px;
}
#menu {
position: absolute;
top: 153px;
left: 250px;
width: 95%;
}
#content {
position: absolute;
top: 210px;
left: 300px;
max-width: 24.5em;
text-align: center;
padding-bottom: .5em;
}
#footer {
max-width: 100%;
}
img.border {
padding-top: 3em;
padding-bottom: 1em;
}
#footer p {
text-align: center;
font-size: 65%;
line-height: 105%;
color: #ff9933;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Extra browzer space to the right
thanks Thomas and to the others who responsed as well. I am still getting
this width and percentage down in my mind..the menu width never occurred to
me! Seems so obvious now ;o!
Debbie
- Original Message -
From: "Thomas Peklak" <[EMAIL PROTECTED]>
To: "Iorhael" <[EMAIL PROTECTED]>
Cc:
Sent: Wednesday, January 04, 2006 4:58 AM
Subject: Re: [css-d] Extra browzer space to the right
> #menu {
>position: absolute;
> top: 153px;
> left: 250px;
> width: 95%;<
> }
>
> The problem is the width of the #menu. Either you can delete the whole
> entry or set it to a width in px, which should be the sum of the width
> of the images in this menu
> (home2.gif,thejourney2.gif,thestory2.gif,...)
>
> You positioned the menu absolutly 250px from the left and gave it a
> width of 95% ( what is 760px on a 800x600 screen). That's why the
> #menu is wider than the screen.
>
> greets,
>thomas
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Container coding/alignment problem with float
Hi, I need some adviceI am attempting to recode a web site (and possibly
others) so that I have everything nested at the same level...that is: container
with the content, link, footer, etc. nested underneath. (Previously I had the
link and footer inside the content). When I am done with this, I am going to
move this out of a template and into php.
When I tried this using absolute positioning, I came up with a substantial
width difference between IE and FF. So I am trying to float the content. But
now the content is not aligning with the other elements in the container...its
far over to the right...have tried using a negative left margin to no avail.
So I have two questions:
1) What is the standard way of nesting in a situation where you don't have a
physical box container? Is my coding correct? (In this case, I am leaving the
banner and sidebar *outside* of the container and using absolute positioning
for them so that the container properties apply only to the content, resume
link, and footer.)
2) How do I fix the alignment problem?
I may be all off here. I would really appreciate suggestions on how best to set
this up.
Thanks!
Debbie
www.drk-writing.com
#banner {
position: absolute;
top: 0;
left: 0;
}
#sidebar {
position: absolute;
top: 119px;
left: 0;
}
#container {
margin-left: 185px;
}
#content {
float: right;
width: 475px;
}
/* Resume link*/
#resumelink {
clear: both;
padding-bottom: 60px;
}
p.resumelink {
font-size: 70%;
}
/*bottom links, copyright*/
#footer {
border-top: 1px solid #2C8F96;
width: 475px;
}
.nav {
padding-top: .5em;
font-size: 70%;
}
.copyright {
font-size: 65%;
color: #2C8F96;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Container coding/alignment problem with float
Regarding my earlier message...I tried absolute positioning again for the
content, and while I don't have the width problem this time, and don't have the
alignment problem I do when using float, I do have varying top margins between
IE, FF, and Opera. I've encountered this problem before and worked around it
but I need to figure out how to resolve it.
And either way, I am still wondering if I am approaching this time of layout
correctly.
Debbie
www.drk-writing.com
Here's the revised code for the absolute positioning:
#banner {
position: absolute;
top: 0;
left: 0;
}
#sidebar {
position: absolute;
top: 119px;
left: 0;
}
#container {
position: absolute;
top: 119px;
left: 185px;
}
#content {
width: 475px;
}
/*resume link*/
#resumelink {
padding-bottom: 70px;
}
p.resumelink {
font-size: 70%;
}
/*bottom links, copyright*/
#footer {
border-top: 1px solid #2C8F96;
width: 475px;
}
.nav {
padding-top: .5em;
font-size: 70%;
}
.copyright {
font-size: 65%;
color: #2C8F96;
}
- Original Message -----
From: Iorhael
To: css-d@lists.css-discuss.org
Sent: Thursday, January 12, 2006 7:56 PM
Subject: Container coding/alignment problem with float
Hi, I need some adviceI am attempting to recode a web site (and possibly
others) so that I have everything nested at the same level...that is: container
with the content, link, footer, etc. nested underneath. (Previously I had the
link and footer inside the content). When I am done with this, I am going to
move this out of a template and into php.
When I tried this using absolute positioning, I came up with a substantial
width difference between IE and FF. So I am trying to float the content. But
now the content is not aligning with the other elements in the container...its
far over to the right...have tried using a negative left margin to no avail.
So I have two questions:
1) What is the standard way of nesting in a situation where you don't have a
physical box container? Is my coding correct? (In this case, I am leaving the
banner and sidebar *outside* of the container and using absolute positioning
for them so that the container properties apply only to the content, resume
link, and footer.)
2) How do I fix the alignment problem?
I may be all off here. I would really appreciate suggestions on how best to
set this up.
Thanks!
Debbie
www.drk-writing.com
#banner {
position: absolute;
top: 0;
left: 0;
}
#sidebar {
position: absolute;
top: 119px;
left: 0;
}
#container {
margin-left: 185px;
}
#content {
float: right;
width: 475px;
}
/* Resume link*/
#resumelink {
clear: both;
padding-bottom: 60px;
}
p.resumelink {
font-size: 70%;
}
/*bottom links, copyright*/
#footer {
border-top: 1px solid #2C8F96;
width: 475px;
}
.nav {
padding-top: .5em;
font-size: 70%;
}
.copyright {
font-size: 65%;
color: #2C8F96;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Button text off-center in IE
Hi, Does anyone know of a fix to center button text in IE and insert the padding underneath the buttons? I've been looking through browser fixes but haven't found anything that specifically addresses this problem. This looks fine in FF and Opera. http://www.drk-writing.com/debscards/debscards3.php Thanks! Debbie __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Button text off-center in IE > easy css-webdeveloper-tools
3. The short and easy use way: magic on screen! > Follow step 2, but now click "CSS" and then "Edit CSS". That opens on your > left hand a sidebar with directly the content of the stylesheet. If more, > they are tabbed. > And a little wonder: in the sidebar you can change things! Real time you > see the changes in the panel of the openend page (even if it is not your > own page!). That makes it very very easy to analyse: change and see if it > works! Francky, this is amazing!! Thank you for telling me about this :):) I realized that my initial question was kind of a duh when I saw your first itembut I'm glad I asked cause I never would have found out about this FF toolbar! This will be extremely helpful! (I tried using the FF DOM Inspector but didn't quite get the hang of it.) I will try your IE fix for the form buttons tomorrowthanks again for your help with both things! Debbie __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Button text off-center in IE > easy css-webdeveloper-tools
1. The changing in the sidebar is just real time - it does not change > the real stylesheet. > So when you turn it out or give a refresh of the page, all the changes are > gone! But as you have discovered an improvement in the sidebar, you can > copy and paste it immediately in the real stylesheet and save that to make > it definitive. Actually, you can save to your stylesheet directly from the toolbar without having to copy and paste...just click the Save icon above the tabs and navigate to the file :) The outline block feature that you mentioned is extremely helpful as well...I had been putting borders around some of my elements to check their positioning...this feature saves you from having to go that trouble. And its nice to have the View Source button tool barand tons of other features as well. What a useful tool this is! Thanks again! Debbie - Original Message - From: "francky" <[EMAIL PROTECTED]> To: "Iorhael" <[EMAIL PROTECTED]> Cc: Sent: Sunday, January 15, 2006 3:33 AM Subject: Re: [css-d] Button text off-center in IE > easy css-webdeveloper-tools > Iorhael wrote: > >> 3. The short and easy use way: magic on screen! >> Francky, this is amazing!! Thank you for telling me about this :):) >> ... > > Yes, I was quite surprised when I saw it working! I see I've forgotten to > add two "warnings": > > 1. The changing in the sidebar is just real time - it does not change the > real stylesheet. > So when you turn it out or give a refresh of the page, all the changes are > gone! But as you have discovered an improvement in the sidebar, you can > copy and paste it immediately in the real stylesheet and save that to make > it definitive. > > 2. Changing css, you see only the effect for Firefox. > If a page is performing good in FF but not in IE, it doesn't work. > Therefore you need to open IE and make changes in the real stylesheet. But > also in this case the FF css-sidebar is extremely usable: to check if the > IE-improvements do attack the presentation in FF (if yes, the > IE-improvements have to be placed in an IE-only hack). > > That's it! > francky > __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Correcting for spacing difference in Opera
Hi, I am trying to line up the date stamp with the menu links on this site, but
there is a vertical spacing difference between IE, Firefox, and Opera. I have
coded for the IE difference but am not sure how to code for the Opera
difference. Can someone help me out with this or direct me to a link? I run
across this problem quite a lot with vertical spacing in my sites.
http://www.drkdesign.com/LVS/phpintro/
/*date stamp*/
p.date {
position: absolute;
top: 129px; /*for IE6*/
left: 8px;
text-align: left;
color: #fff;
font-size: 65%;
}
html>body p.date {
position: absolute;
top: 119px; /*for all other browers*/
left: 6px;
text-align: left;
color: #fff;
font-size: 65%;
}
Thanks!
Debbie
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Correcting for spacing difference in Opera
Zero out default-margins before positioning, and most differences will > be gone. Georg, Thanks for that ...that eliminated the difference between IE and Firefox, so I don't need the html>body hack anymore. However, the Opera still brings in the date stamp lower. http://www.drkdesign.com/LVS/phpintro/ Do you know of a specific fix for Opera? Debbie __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Correcting for spacing difference in Opera
> Zero out default-margins before positioning, and most differences will > be gone. hupon re-opening Opera, the date stamp position looks just fine now...thanks again Georg! I must not have refreshed after making the change. Debbie __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE bug - Submit and Reset
When I click submit on this form, the space above the Submit and Reset buttons disappears in IE. It doesn't effect the function but it looks ugly. Does anyone know of a fix for this? http://www.drkdesign.com/debscards/cards_form.php Thanks! Debbie __ 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] IE bug - Submit and Reset
>input:focus, textarea:focus, select:focus { background-color: #ABE2C4;
>color: #590F81; margin: >15px; padding: 3px; width: 5em;
>}
>is it?
Leyrson,
Oh geesh! I forgot the CSS code for the buttonsmy apologies :(
Here it is:
input[type=submit], input[type=reset] {
margin: 15px;
padding: 3px;
width: 5em;
text-align: center;
border: 1px solid #000;
}
www.drkdesign.com/debscards/cards_form.php
Debbie
__
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] Buttons shifting in form in IE
Hi, am still wondering if anyone knows I can prevent the Submit and Reset
buttons from shifting when clicked in this form:
http://www.drkdesign.com/debscards/cards_form.php
The code for the buttons:
input[type=submit], input[type=reset] {
margin: 15px;
padding: 3px;
width: 5em;
text-align: center;
border: 1px solid #000;
}
Debbie
__
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] Buttons shifting in form in IE
Ingo, I found your previous post and tried apply the width...and it worked!!! Thank you so much and I'm sorry I missed it before! Debbie - Original Message - From: "Ingo Chao" <[EMAIL PROTECTED]> To: "Iorhael" <[EMAIL PROTECTED]> Cc: Sent: Saturday, February 18, 2006 2:05 AM Subject: Re: [css-d] Buttons shifting in form in IE > Iorhael wrote: >> Hi, am still wondering if anyone knows I can prevent the Submit and Reset >> buttons from shifting when clicked in this form: > > Did you try my suggestion? > > Ingo > > -- > http://www.satzansatz.de/css.html > __ 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] De-applying :focus for radio buttons
Does anyone know if there is any way to set up :focus for input, textarea, and
select in forms without having it applied to the radio buttons? I tried
input:focus.radio and specifying the background color of the form but that did
not work.
Debbie
http://www.drkdesign.com/debscards/cards_form.php
CSS:
input, textarea, select {
background-color: #DBC8F5; /*lavendar*/
font: 90% Arial, Helvetica, sans-serif;
}
input:focus, textarea:focus, select:focus {
background-color: #ABE2C4; /*light green*/
}
input.radio {
background-color: #590F81; /*form bkgrd color*/
font: 90% Arial, Helvetica, sans-serif;
}
__
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] De-applying :focus for radio buttons
> If you can't get the target browser to work with attribute selectors, try
> your idea again using
> the syntax: element.class:pseudoclass ex: input.radio:focus
Mike, okay, using this syntax, it works in Firefox but not in IE. And in
Opera, the buttons are blanked out so that you can't select them at all.
http://www.drkdesign.com/debscards/cards_form.php
input:focus, textarea:focus, select:focus {
background-color: #ABE2C4; /*light green*/
}
input.radio {
background-color: #590F81; /*form bkgrd color*/
font: 90% Arial, Helvetica, sans-serif;
}
input.radio:focus {
background-color: #590F81; /*form bkgrd color*/
}
Debbie
__
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] De-applying :focus for radio buttons
> You might consider the IE-only "behavior" CSS - it won't validate (so put
> it in a conditional
> comment block for IE and hide from the validator) and you'll have to write
> an .htc in javascript to force IE to modify the class of the element -
> then update your conditional CSS to mention that added class. (or you can
> keep the rules together in one CSS by doing this:
>
> input.radiofocus, /* the IE version */
> input.radio:focus {something}
> This is why nobody who uses CSS really likes IE (and the major mindshare
> forces everyone to cater to it)
I agree with totally on IE ;) But since I have no clue how to do the
javascript thing you mention above, I think I'll leave as is for now, or
just remove the focus.
Thanks!
Debbie
__
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] Border question
I am drafting up a new layout here and was wondering if there would be any way
to tweek the menu links to seamlessly extend the dashed line (a left border on
the content div) up to right under the banner.
Thanks!
Debbie
www.drkdesign.com/chloejoseph/
CSS:
#container {
text-align: left;
background-color: #035580;
margin: 0 auto 0 auto;
padding: 0 0 0 0;
width: 780px;
}
#banner {
height: 153px;
border-bottom: 2px solid #727E84;
}
/*menu*/
#menu ul {
margin: 0;
padding: 6px 0 3px 0;
list-style-type: none;
background-color: #035580;
text-align: right;
}
#menu li {
display: inline;
padding: 0 14px 0 14px;
font: 80% Arial, Helvetica, sans-serif;
font-weight: bold;
}
#menu li a, #menu a:visited {
text-decoration: none;
color: #89989F;
}
#menu li a:hover {
color: #FCAA7F;
}
/*sidebar*/
#sidebar {
float: left;
width: 0;
padding-left: 25px;
margin-left: 0;
width: 200px;
}
__
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] Border question
Thank you Jim...the first suggestion here worked after some tweeking to the padding settings...(don't know why I didn't think of it ;o!) Debbie - Original Message - From: Jim Davis To: Iorhael Sent: Saturday, February 25, 2006 9:31 PM Subject: Re: [css-d] Border question Hi, In the html try moving #menu inside of #content. You could also put a negitive top margin on the content div to raise it up, then create a class to add to the first in the content to push it down so it is below the menu. Jim On 2/25/06, Iorhael <[EMAIL PROTECTED]> wrote: I am drafting up a new layout here and was wondering if there would be any way to tweek the menu links to seamlessly extend the dashed line (a left border on the content div) up to right under the banner. Thanks! Debbie www.drkdesign.com/chloejoseph/ __ 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] Border question
ooops...apologies to Jim and everybody on that last message...forgot to trim :o! Also, thank you Rahul for your input as well...will save for future reference. Debbie __ 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] SOS submenus not staying displayed
This is for all the SOS experts out there...I have set up a cascading menu
using SOS but can't get the submenus to stay displayed upon hover. I have
included the csshover2.htc file. I have a feeling that it is some small thing
in the code that I am forgetting ;(
Thanks!
Debbie
Link:
http://www.drkdesign.com/voicebox_demo/
Menu CSS:
/* CSS Popout Menu */
/* Fix IE. Hide from IE Mac \*/
* html #menu ul li{float:left;height:1%;}
* html #menu ul li a{height:1%;}
/* End */
#menu {
position: absolute;
top: 115px;
left: 0px;
width: 130px;
z-index: 10;
}
#menu a, #menu a:visited {
display: block;
text-decoration: none;
padding: 6px 0 6px 18px;
width: 105px;
font: 85% Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-style: italic;
color: #EEA669; /*orange*/
text-align: left;
white-space: nowrap;
}
#menu a.parent:hover /* attaches parent-arrow on all parents */
{
background-image: url(../images/vb_arrow.gif);
background-position: right;
background-repeat: no-repeat;
}
#menu a:hover {
color: #7BB5E1; /*light blue*/
}
#menu li {
list-style-type: none; /* removes bullets */
}
#menu ul li {
position: relative;
}
#menu li ul {
position: absolute;
top: 0;
left: 130px; /* distance from of left menus (should be same as width) */
font-size: 80%;
display: none;
}
#menu li ul li {
width: 130px;
background-color: #362CA3;
border-top: .5px solid #F4BA89; /*light orange*/
border-top: .5px solid #F4BA89; /*light orange*/
border-bottom: 1px solid #828282; /*dark gray*/
border-right: 1x solid #828282; /*dark gray*/
padding: 3px 10px 3px 0px;
}
/*IE fixes*/
div#menu ul, #menu ul ul, div#menu ul ul ul {
margin:0; /* keeps the menu parts together */
padding:0;
width: 100px; /* width of sub menus */
}
div#menu ul ul, div#menu ul ul ul, div#menu ul li:hover ul ul, div#menu ul
li:hover ul ul ul {
display: none;
}
div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover
ul {
display: block;
}
__
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] Need to contact the list master
I need to contact the list master...could someone let me know who that would be and the best way to contact them? Thanks! Debbie __ 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] More SOS issues
I am now setting up the CSS code for a horizontal SOS menu display but am
having trouble getting the submenus to display on hover.
Also, in IE, the menu is stretched vertically. Would this be due to the size of
my background image? Its only 10 pixels in height.
http://www.drkdesign.com/voicebox_demo/index_h.htm
CSS:
#menu-container {
position: absolute;
top: 100px;
left: 0px;
}
#menu {
width: 800px;
float: left;
margin: 0;
background-image: url(../images/vb_linkbkgrd_h.gif);
border-bottom: 1px solid #F4BA89;
padding: 3px 0 5px 0;
}
#menu a {
font: 70% Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-style: italic;
text-align: center;
display: block;
white-space: nowrap;
margin: 0;
padding: 0 0 0 5px;
}
#menu a.first {
padding-left: 5px;
}
#menu a.rightpad {
padding-right: 30px;
}
#menu a, #menuh a:visited /* menu at rest */ {
color: #F4BA89; /*light orange*/
text-decoration: none;
}
#menu a:hover /* menu at mouse-over */ {
color: #7BB5E1; /*light blue*/
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
float: left;
width: 100px; /* width of all menu boxes */
}
#menu li {
position: relative;
}
#menu ul ul {
position: absolute;
z-index: 500;
top: auto;
display: none;
padding: 1em;
margin: -1em 0 0 -1em;
width: 100px;
}
#menu li ul li {
padding-left: 3px;
border-top: .5px solid #F4BA89; /*light orange*/
border-left: .5px solid #F4BA89; /*light orange*/
border-bottom: 2px solid #828282; /*dark gray*/
border-right: 2px solid #828282; /*dark gray*/
}
div#menu li:hover {
cursor: pointer;
z-index: 100;}
div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}
div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}
/* End CSS Popout Menu */
And thanks to Tedd for his wonderful examples of vertical and horizontal
SOSthey have been very helpful!
http://www.sperling.com/examples/menuv/
http://www.sperling.com/examples/menuh/
Debbie <[EMAIL PROTECTED]>
__
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] More SOS issues
> Typo? Or confused mix of styling?
> '#menu' and '#menuh' isn't the same.
>
> Looks like all I needed to do was to make the CSS ID correspond to the
> HTML ID...
argggh!! I thought I changed all those to just plain "menu" (I brought the
code in from Tedd's site and he had menuh throughout)but I missed those
at the bottom...so the submenus are working okay now :)
And using menu {line-height: 0) did the trick for the IE problem. However,
the submenus are showing up *under* the container in IE despite the fact
that #menu ul ul is set to a z-index of 500. I just read Francky's reply to
Connor on this issue from earlier today but couldn't relate it directly to
my code
Thanks again for all your help!
Debbie [EMAIL PROTECTED]
__
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] More SOS issues
Do you have a new link for "IE-minded people", so we can hobby some > more? Francky... sorry...I changed it to php...its http://www.drkdesign.com/voicebox_demo/index_h.php What exactly is the peekaboo bug? Is that what this problem is with the submenus showing up underneath the container? Will I need to do a separate stylesheet for IE? Or will a statement in the php page suffice? Debbie __ 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] More SOS issues
Oh, you're just setting the z-index on the wrong element. Try adding...
>
> #menu-container {z-index: 1;}
Well it looks to me like that's all it was Georg. And you answered something
I was wondering about too with the high index levels...that was set in the
code I used from Tedd's site..didn't really understand why 500 was
needed...I figured you just needed the index number for the number of items
you were layering (in this case, 2).
I just have to prepare a hack now to correct for IE moving the submenus up
too high.
Debbie
__
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] SOS - Peekaboo problem?
Well I thought I had my SOS problems fixed, but I had failed to notice before that in IE, two of the submenus disappear when I try to hover over the bottom link. The third one works fine however. Is this part of the peekaboo problem? The submenus also seem to be a bit unstable. http://www.drkdesign.com/voicebox_demo/index_h.php http://www.drkdesign.com/voicebox_demo/css/vb_menu_h.css Debbie [EMAIL PROTECTED] __ 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] More SOS issues
> Maybe you can try to give the submenu-li's some IE-layout:
>#menu li ul li a { width: 100%; }
> so that IE can use the {display: block;} which is already in the code.
Francky, I made these adjustments but unfortunately, I am still not able to
hover over the bottom link of two of the submenus...am baffled here as to
why the middle submenu works okay.
http://www.drkdesign.com/voicebox_demo/index_h.php
http://www.drkdesign.com/voicebox_demo/css/vb_menu_h.css
Thank you so much for going to all the trouble of making that screen shot!
It was very helpful! (and very thoughtful :) And I didn't even know about
that image bar showing up...have made that change as well.
Debbie [EMAIL PROTECTED]
__
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] More SOS issues
> btw-1: Perhaps you can give the '#menu li ul li a' the padding instead of > the '#menu li ul li', then the (yellow) clickable area can be greater. Francky and others, another thing I am noticing with the submenus in IE is that hovering is a bit "jumpy" between the parent link and child links right at the top border. I tried "closing the gap" as George mentioned yesterday but its still jumpy...I know there is a fix for that but cannot for the life of me remember what it is. Do you have any suggestions? http://www.drkdesign.com/voicebox_demo/index_h.php http://www.drkdesign.com/voicebox_demo/css/vb_menu_h.css Debbie [EMAIL PROTECTED] __ 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] Link hovering wierdness in IE
Hi, I have a really strange thing going on when hovering over menu links in IE in this web site. I just added a background image for the menu links on hover...it works fine in Firefox and Opera, but in IE, hovering over and clicking on the links causes really strange things to happen, including the background turning black, and the type overlapping itself. Has anyone encountered this before? I have the csshover2.htc file loaded and everything validates. www.drkdesign.com http://www.drkdesign.com/drk_css/drk_menu.css Debbie __ 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] Inserting a JavaScript image slideshow
>if I want to insert a JavaScript slideshow in a CSS page, do I just insert it between tags or is it more complicated? Riva, I have a site where I used a javascript slideshow but I just used it on the home page, so I inserted the javascript inbetween the html head tags on the index.html page: www.drkdesign.com/debscards/index.php The link to activate the slide show is in the third paragraph. Do you need to have it on more than one page? If not, I would just try it this way. Debbie __ 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] Float Question
Is it typical when floating to have a situation like this one where I will need to use large negative top and level margins to adjust for the right floated element? Using the block outline tool in Firefox I am seeing that the elements are no where close to each other. If this is not normal for floated objects, could you let me know what I'm doing wrong? http://www.drkdesign.com/LRE/ http://www.drkdesign.com/LRE/css/testpage.css Debbie __ 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] Float Question
>Float everything left and then they will abut one another. Ed and Ells, Thanks so much! After going round and round, I finally got it! :) http://www.drkdesign.com/LRE/ Debbie __ 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] Disappearing border; inconsistent font
Hi, In this layout, the dashed line below the Property Search image and menu disappears when I float the menu. I tried adding a line height to the #search id but that didn't help. Also, in IE, the font for the menu links is coming in very large...I have not seen this inconsistency before between browsers and was wondering if anyone knew how to resolve it before I resorted to adding a hack. http://www.drkdesign.com/LRE/ http://www.drkdesign.com/LRE/css/testpage.css Debbie __ 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] Disappearing border; inconsistent font
>Also, in IE, the font for the menu links is coming in very large...I have not >seen this inconsistency before between browsers and was wondering if anyone >knew how to resolve it before I resorted to adding a hack. I have resolved this problem (found an incorrect selector)...am still having trouble getting the dashed border to show though. http://www.drkdesign.com/LRE/ http://www.drkdesign.com/LRE/css/testpage.css Debbie __ 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] Border Problem - Update
This is an update to the border problem I posted about earlier. The borders for the #header and #search divisions for some reason are appearing *at the top of the divisions* rather than containing the content within the division, even though I have them nested in the html. Would someone mind taking a look at this to see where I'm going wrong...I'm really baffled! www.drkdesign.com/LRE/ www.drkdesign.com/LRE/css/testpage.css www.drkdesign.com/LRE/css/menus.css Thanks once again! Debbie __ 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] Submenus under container in horizontal dropdown layout--revisited
I'm trying to put together a sample layout page for horizontal dropdown SOS menus based mostly on the code on alistapart.com. I've got it looking great, all except that the submenus appear *underneath* the container in IE only. The other week when I was trying to put a horizontal dropdown layout together, Georg on this list suggested I apply a z-index to the top level element...this worked okay then but there were other issues so I started from scratch, redoing the code according to alistapart.com. But for some reason, applying the z-index to the top element doesn't seem to be working this time, and I didn't see a specific reference to this problem on alistapart.com. Does anyone know of a (relatively) simple solution? http://www.drkdesign.com/sample_layouts/horiz_dropdown/ http://www.drkdesign.com/sample_layouts/horiz_dropdown/css/drk_menu_h.css Debbie __ 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] Submenus under container in horizontal dropdown--revisited
>I also had this problem with my suckerfish menus... In theory z-index only >works with positioned elements - Try putting your z-index declaration on the #menu li ul rather than the #menu li:hover ul. James, I tried this putting the z-index here and several other places too but none worked. :( Debbie P.S. If you reply, could you send it to my email and cc: the list? I get the digest version of the list, so its much easier to reply to a direct email message. Thanks! __ 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] Submenus under container in horizontal dropdown--revisited
>ah, ok, I downloaded your htc file to test it properly, and the following
>works for me-
adding the z-index and position:relative a step higher on your #menu ul:
#menu ul {
padding: 0;
margin: 0 0 0 18px; /*sets left margin for menu*/
list-style: none; /*removes bullets*/
position:relative;
z-index:10;
}
Okay, the position: relative and not the z-index is what did the trick...thanks
James!
And I have a general question on z-indexing...I see alot of really high numbers
used for z-indexing and I'm curious as to why...I thought you only needed to
use as many numbers as there were of elements that you are stacking. I used a
z-index of 1 here and it worked just fine.
Debbie
__
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] Subject: Re: son of suckerfish problems, please help
Els wrote:
>It actually is working, only the dropdowns are hidden behind
>div#content-pane.
>I think you have to do something with z-index maybe :-)
I just had the same problem...try adding a z-index and relative position to the
#nav ul id:
#nav, #nav ul {
margin:0;
padding:0;
background-color:#f5d9a3;
border-top:1px solid #fff;
border-bottom:1px solid #fff;
list-style:none;
height:1.7em;
z-index: 1;
position: relative;
}
Debbie
__
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] JS Text box width differences
Hi, I have added a javascript text box to three pages on the following site and am trying to figure out why the widths of the text box are so different between Firefox and IE...it is making positioning a real pain! Does anyone know how I can minimize the width differences between the two browsers? (Opera looks the same as IE). http://www.drkdesign.com/parkerpennington/ The text box appears on the following pages: --Profile --Programs --Gallery The CSS is at: http://www.drkdesign.com/parkerpennington/css/parker_main.css Thanks! Debbie __ 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] JS Text box width differences
>Currently you use a DocType that triggers 'quirksmode' in all browsers. > If you use a full doctype, e.g >> > "http://www.w3.org/TR/html4/loose.dtd";> > or >> > www.w3.org/TR/html4/strict.dtd"> Thank you Philippe and Andrew! I am not sure how the old document type got in there...I copied these files from other files that used the current Doc Type...but I never would have thought to check to see that this was the problemI was concentrating purely on the code. Am still having a problem with moving the text box horizontally though using negative margins...particularly on the Profile page. Do you have any suggestions for fixing the Profile page problem? (I would like to move the box over the left on the Programs page too but using a negative left margin is not working.) http://www.drkdesign.com/parkerpennington http://www.drkdesign.com/parkerpennington/css/parker_main.css Debbie __ 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] JS Text box width differences
> I'm prepared to be corrected, but it looks like Firefox is doing the wrong > thing. The "margin box" of tables is not supposed to overlap floats. > > To get your fun facts over the table, you'd need to use positioning, but > then you'd run the risk of table text going underneath the funfacts box. > > Since the profile page is basically all tables, I'd be tempted to just > drop funfacts from that page, unless someone smarter than me can come up > with something! This is indeed what I ended up doing...I put in on the Biography page where there are no tables. And David, thank you for the margins help! Debbie __ 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] Float, positioning, and z-indexing
Hi, Is there anyway to use relative positioning with float? I need to use a z-index and know that you have to be using absolute or relative positioning in order for it to work...however, I seem to only be able to position the cutout picture on the home page here where I want it using float:right. Is there any way to mix the two? The z-index works fine with the float in IE and Opera but not Firefox. If not, I'll just remove the second set of dots but I'd like to keep them if possible. http://www.drkdesign.com/parkerpennington/ http://www.drkdesign.com/parkerpennington/css/parker_main.css Debbie __ 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] Need help with positioning
I am attempting to clarify my muddled thinking on various types of positioning by restructuring this page...I am trying to position the datestamp so that it appears at the top right of the banner and stays fixed even when the browser is stretched at higher screen resolutions. I have been going round and round on this...z-indexing does not seem to work with either relative or absolute positioning. Could someone suggest to me the best way to go about this? Also, a similar problem...when I try to center the container (by adding a width to the container), the menu stays over to the left when the browser is streched. Also, do I need to float the content when I use relative positioning? (The content should be appearing right under the banner). In general, am rather confused as to when to use absolute vs. relative vs. float. I have done all three at various times but its been sort of a hit or miss thing but I am now attempting to really understand how this all works (unsuccessfully). (BTW, I had done a lot of reading on all this, but I think seeing it in relation to my specific site here would help). http://www.drkdesign.com http://www.drkdesign.com/drk_css/drk_import.css Thanks! Debbie __ 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] Positioning continued
A followup to my last message on positioning: In general, I am trying to set up my sites now so that everything stays within the container box even when the browser is stretched at higher resolutions. I am finding that not assigning a width to the container seems to accomplish this but then the site doesn't center (see the following example). http://www.drkdesign.com/katz-lynch/ http://www.drkdesign.com/katz-lynch/css/cj_main.css Debbie __ 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] Need help with positioning
>http://www.kennygraham.net/drk/index.html
>http://www.kennygraham.net/drk/style.css
>should get you started in the right direction. css is commented.
thank you Kenny and David...it looks just fine with floating the menu...one
difference is is that I assigned the centering margin: {0 auto} to the
container rather than the body (as David noted).
My next question is...*should* I be centering box model layouts like
these...or would they look better to the left? I use 800 x 600 resolution
myself so it is at full screen but I'm trying to figure out the standard for
box model layouts at higher resolutions. I am looking at advanced CSS sites
and notice that their layouts seem to expand to the browser at whatever
resolution. I have never figured out how to do this. Do you know?
Debbie
P.S. The date is gone ;)
__
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] colored scrollbars
Hi, Does anyone know how to make colored scrollbars work for sure in IE? It seems that sometimes they work and sometimes they don't. Right now, they are not working for me for these two sites, yet I always use the same code (except for colors). www.figureskatersonline.com/katz-lynch www.figureskatersonline.com/katz-lynch/css/cj_main.css www.drkdesign.com/parkerpennington/ www.drkdesign.com/parkerpennington/css/parker_main.css Thanks! Debbie __ 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] Shifting content
Hi again, I apologize for the plethara of questions right now...I am going through some of my previous web sites and restructuring the css so that all the elements are in containers (thus stablizing the elements when the browser is stretched). On this one, I created a subcontainer for the banner graphics, and then a separate subcontainer for the content. I finally got everything positioned properly except that I can't get the content to shift over to the left using a negative left margin. How would I shift over the content to where it needs to be? It is a floated element...can you not use negative margins with floats? http://www.drkdesign.com/northwesternesse/microdor/ http://www.drkdesign.com/northwesternesse/microdor/microdorimport.css Debbie __ 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] Shifting content
>Try playing around with the width value for #content. >75% looked good. Well, the trouble is, when I set the content to the width I want, it is still shifted too far over to the right...I am trying to get the content to be about the same width as the links so that it centers fairly well60% looks about right...using the Block Elements tool in Firefox, it looks like there is space for the content to shift over the to the left at this width, but for some reason, the content won't shift over using a negative left margin. Debbie __ 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] Shifting content
> Yes, but you can only position floats with margins by setting front-edge
> margins on them.
>
> So since that's a 'float: right' the front-edges are 'top' and 'right'
> for positioning. For a 'float: left' the front-edges are 'top' and 'left'.
>
> In your case a positive margin-right will do the job. Try adding
> something like...
>
> #content {margin-right: 80px;}
Very interesting! I did not know this...thanks Georg! In fact, once I played
around it with it some I got it to work without having to use the negative
left margin at all...This also explains some similar margin problems I was
having last weekend that David helped me fix...now I see that that worked
according to this same principle.
Debbie
__
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] colored scrollbars
> Debbie -- It could be the order.
> You have:
> scrollbar-face-color: #030E52; /*navy blue*/
> scrollbar-shadow-color: #B7C8E5; /*light blue*/
> scrollbar-highlight-color: #030E52; /*navy blue*/
> scrollbar-3dlight-color: #B7C8E5; /*light blue*/
> scrollbar-darkshadow-color: #B7C8E5; /*light blue*/
> scrollbar-track-color: #030E52; /*navy blue*/
> scrollbar-arrow-color: #B7C8E5; /*light blue*/
> I don't use all the ones you do, but these do work:
> scrollbar-highlight-color: #FFCC00;
> scrollbar-shadow-color: #FFCC66; /* lighter shade of gold */
> scrollbar-track-color: #E2C9AD;
> scrollbar-arrow-color: #FFCC00; /* IE is ignoring */
> scrollbar-darkshadow-color: #66;
> scrollbar-3dlight-color: #cc;
> Also -- I have these as the VERY first entries for the body tag:
> Body {scrollbar-highlight-color: #FFCC00; ...
Lynda, I tried this but to no availdo you have any other ideas on
getting the colors to show up? Every once in a while they do show up for me
and then they disappear again :o!
Debbie
__
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] Good article - fluid vs. fixed
Hi, I just wanted to pass along a good article that is helping to clear up some of the position questions I posted here yesterday...it addresses the differences between fluid vs. fixed sites: http://www.flyte.biz/resources/newsletters/04/12-fluid-v-fixed-web-pages.html Debbie __ 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] Z-index for a background image?
In this layout...is there any way possible to get the filmstrip (a background image) to show up *over* the banner (using a z-index or some other way)? I am trying to get away from a "boxy" looking layout... http://www.drkdesign.com/parkerpennington/ http://www.drkdesign.com/parkerpennington/css/parker_main.css/ Debbie __ 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/
