[css-d] Menu/navigation problem
I am working on a redesign for a client of mine and have run into a problem. The client wants a row of colored blocks across the top of the website and wants the navigation to fit inside each block. The problem is that when I design it to look good in 800 x 600, it looks awful in 1024 x 768 and vice versa. I have tried using percentages, floats, etc. but am at my wits end on how to get this to work. One option is a JavaScript that detects the screen resolution, but that has its problems also. Any help would be much appreciated. TIA, Riva http://www.littleracquets.com/new_site_test/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Menu/navigation problem
Hi JonMarc, Thank you for the reply. I had considered the colored background to each li or a, but wasn't sure what to do when the menu ended. I think I need to try it and see what problems I run into. (The menu is absolutely positioned already.) Thanks! Riva JonMarc Wright wrote: You could use absolute positioning and left margins to make sure that the text always starts in the right place, but then the header wouldn't be liquid like the body of your site. getting it to look okay in both 800 x 600 and 1024 x 768 isn't that difficult, but getting it to look right when text size is bumped up or down, or with window resizing below 800 pixels wide is where it gets tricky. just at a glance and without too much thought, it would seem like the best thing to do would be to make only the top row of colored boxes be the background image, then use background colors (or images if you'd like) on the second row. each link would then be given a declared with which would be the same as the image width, and each a (or it li) would be given the padding to keep it separated by the same amount of space. they would then lay out horizontally next to each other, but if the user resizes the window below their natural width a couple of the blocks would bounce down to the next line. if someone resizes the text larger, their width doesn't change, but the height does. if you want to match the blocks perfectly, you could always make a taller image for the top row of blocks, then use css to set the height using em, that way if the font size is bumped up, the link blocks will grow in height, and so will the top blocks that are just there for show. i don't have a lot of time right now (it is almost midnight here) but i will try to put together a really quick example of what i'm talking about for you to look at. if you understand the concept that i've written about above, but would like some help with specifics, just let me know. take care, jonmarc __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Menu/navigation problem
Thank you for the reply Alan. I appreciate the comments. I did actually change the block graphic so that the blocks are smaller, but the only problem now is that the links are not centered at higher resolutions. I don't know if this will bother my client, but will look at the code again. Thanks for the effort and the help, Riva Alan Gresley wrote: Hi Riva These are the challenges you are facing. 1) Designing for a certain range of screen resolution. 2) Using in-valid html [1]. 3) Using inline style. 4) Not using the correct doctype. The doctype you were using was putting most browsers in quirksmode [2] [3]. 5) You had one set of a style block for #wrapper followed by almost the same style block for htmlbody #wrapper. This is repeated through the stylesheet for other selectors. Surely those styles are not so esoteric that IE6 would spit the dummy. It can handle some quite robust CSS if given a chance. 6) One of your images is 540kbytes. This could be reduced to around 30kbytes to save bandwidth. Seeing that your boss is seeing a lovely brickwall and visualizing the links sitting perfect in each brick, there is only one approach. Fixed width anchors and a fixed width navigation div. So nothing looks to odd, we want the navigation div centered. This is done with an left and right margin set to auto. Now since we just did that, we better fix up that background. The background bricks must be centered also. Knowing the screen resolution you were designing for and seeing those heights in your stylesheet, you may have been after a sticky footer? The design and it being tennis would call for this I think. This requires a min-height 0f 100% set on the #wrapper. The #topper div must be absolutely position, thus being taken out of the flow so now the #wrapper will rise up to fill the space. We use the FooterStickAlt [4] method for positioning the #botter div. BTW, what is the topper and botter business. I have done this reworking. http://css-class.com/x/racquets/ You may notice that I have commented out some menu items. The design is so restricting that I had run out of bricks. The layout looks quite good on my 1280x800 screen. At 800x600, please note how the left edge of the class menu4 div is now sitting on the left edge of the page. The result is that as you narrow the viewpoint more from this point on, all the links begin to slide right relative to the background and finishing at about 50px as the min-width kicks in. Maybe a rethink of the pages and content will resolve this as I believe five links is the limit you can have. Maybe some bigger bricks would help. It is also possible to have have the menu span over two rows of bricks and aligning each anchor on each brick. You will find some extra comments in the CSS which is embedded in the header of the source. The reworking works in IE5.5, IE6, IE7, FF 2.0.0.8, Opera 9.10 on Win XP SP2 and have tested font resizing 2+ / 2- and minimum font size of 26px in FF and Opera. A read of this about font size [5] will help. I have linked to my links page in my signature line of this message. Many good links are to be found on this page. Good luck. [1] http://validator.w3.org/ [2] http://www.quirksmode.org/css/quirksmode.html [3] http://www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41 [4] http://www.themaninblue.com/writing/perspective/2005/08/29/ [5] http://www.gunlaug.no/contents/molly_1_01.html Kind Regards, Alan http://css-class.com/links/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html 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/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Menu/navigation problem
Thank you for the reply and suggestion, David. I did think of that but my client wants all the blocks the same height and width. Riva David Laakso wrote: Trying to cram all those long word menu links into narrow width/height spaces /may/ require some re-thinking of the layout concept to achieve at least relatively reasonable usability (and even at that it is fragile). Cursory tested in Opera, Camino; and, IE6 and IE7. http://www.chelseacreekstudio.com/ca/cssd/menu.html Best, ~dL __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Menu/navigation problem
Thank you Brian and David. I actually did manage to get it working. Riva __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Pulling my hair out with positioning - need help please
Hi, I have a client who wants a send to a friend function on his website. I found some code for a css div that appears when you click a link on the page, but once I got the functionality working, the positioning got messed up. I have been looking at it for so long that my eyes are going screwy. If anyone could help, I would be most grateful. The page is here (I didn't do the design, just the background programming): http://www.grafixer.biz/site/NewVersion/galleries.htm. The part that I need help with starts just under the body tag - I moved the div there in the hopes that it would position itself correctly relative the body of the page. The link that calls this is near the bottom of the page in the div id=stamp. Everything is very rough as I am getting the positioning right before fixing it up. TIA, Riva __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] dark purple a: visited link colour plus underlined!!!!!!
Your embedded styles have a visited link as #33 (which is a grey colour, no?) The embedded styles in your page will override the styles in the stylesheet. Try putting what you want in the embedded stylesheet and see if that helps. Riva Michael Forker wrote: Hello I have a problem with a dark purple colour and an underlined problem with some of my links on a web site I am creating, can anyone help would like the underlined effect to go away and the a visited state to be a diiferent colour other than purpleor if someone can see the error/problem solution . http://ijsr32.infj.ulst.ac.uk/~10300205/ Portfolio page. current work. please view it with Mozilla Mike:) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] VALIDATION PROBLEMS
Hi Jane, Could you post or paste the code somewhere for people to look at? I have found that those kind of errors have to do with either a doctype problem or some kind of JavaScript error. If you send the code, I am sure you will get more help. HTH, Riva jane jordan wrote: Hello When validating (by local file upload) just my CSS stylesheet I receive no errors. When I try and validate the page containing the CSS I receive the following message :- Lexical error at line 1, column 3. Encountered: D (68), after : ! and no style sheet found I am a complete newbie, using GoLive and not on-line yet, and I can't get past this problem (have lost about three days of my life !). It seems that the CSS itself is ok but it's as if something can't get past the beginning of my html document to check the css in the page. Please, if anyone could help me, it will be very greatly appreciated ! JaneJ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE/FF bug with ul background image
Hi,
I am pulling my hair out trying to fix this problem and cannot figure it
out.
In one of my websites, the header graphic is in a blue box with a 1px
white border. Just underneath and a little left of that blue box is a
light blue box with a 1px white border (almost like a drop shadow.) The
problem is with the navigation. I thought it would be cool to make a
small graphic of the light blue box and place it just behind the
navigation to mimic the header graphic. It looked fine in IE, but
disappeared in FF and when it looked good in FF, it was too low in IE.
I searched and searched and eventually made a floating div 15px high,
with the light blue color and the 1px white border and got it positioned
behind the navigation, but I am still getting the same problem. I tried
every conceivable hack I could find but nothing helped. If anyone could
help me figure this out I would be very grateful. Below is the code.
TIA,
Riva
#backer {
width: 110px;
background-color: #9aa5cc;
border-bottom: 1px solid white;
border-left: 1px solid white;
position: relative;
float: right;
top: 300px;
top: 280px;
height: 20px;
}
#navcontainer {
color: white;
width: 130px;
display: inline;
border: 0px solid white;
margin: 0;
height: 180px;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
text-align: center;
text-transform: uppercase;
position: relative;
float: right;
right: -1px;
}
ul#navlist {
padding: 0;
margin-left: 0;
width: 130px;
text-align: left;
border: 0px solid white;
background-color: #2f4d9a;
}
ul#navlist li {
list-style: none;
color: white;
line-height: 1em;
display: block;
margin: 0;
padding: 0;
border-top:1px solid white;
border-left: 1px solid white;
}
and
div id=topContainer
div id=backer/div
img src=images/new_blue_header.gif align=center border=0
alt= style=position:relative;float:left;left: -1px;
div id=navcontainer
ul id=navlist
li id=activea href=index.html
id=currentHome/a/li
lia href=firmprofile.htmFirm Profile/a/li
lia href=practiceareas.htmPractice Areas/a/li
lia href=lawyers.htmLawyers/a/li
lia href=contactus.htmContact Us/a/li
li style=border-bottom: 1px solid white;a
href=articles.htmArticles/a/li
/ul
/div
/div
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Mouseover problem
Hi all, I have a client who will be appearing on TV tomorrow and the image mouseovers I put on her page are not visible on Mac (I think) and browsers other than IE. Can someone point me in the right direction to find more info about this? The site is www.littleracquets.com. Thanks, Riva __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Mouseover problem
Oh duh! Sorry. hit head I see what you are talking about now.
Thanks.
ella wrote:
You specified the Hoover image in the hack for IE but otherwise
You didn't specified a Hoover image in the code for Hoover
A:Hoover { background-image: URL('images/green_tenis_over.gif'}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Browser check please
Hi David, I am not sure what to look for. I did notice that the right hand column does not go all the way down to the footer - is it supposed to? Looks fine otherwise. IE6 and FF2.0.0.1, WinXP HTH, Riva David V wrote: I am only running ie7 and ff2. Could I please have a browser check for ie6 and others. Need to know what it looks like to others. www.trainingdogs.com.au Thanks David __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] FOUC problem
Zoe, can you point me in the right direction to find out what the bug might be? Thanks, Riva Zoe M. Gillenwater wrote: No you can't. If parts of the styles aren't loading, then it's a bug, but a different bug. It's not FOUC. FOUC means all the styles don't load for a second, in IE6 and lower, and it's caused by an @import in the head, and fixed with the addition of a link or script in the head. That's it. There are many, many other bugs that show flashing styles or partially rendered styles, in different combinations of browsers, but these are all separate things that deserve their own names and have their own fixes. If we start calling them all FOUC, we're just confusing the matter, because the FOUC fixes won't work for them. Thanks, Zoe __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] FOUC problem
Hi all, I have a FOUC problem on one of my websites and I have tried all the fixes I can think of but nothing is helping. Would someone mind taking a look and letting me know what the problem is? http://www.starqualitydesigns.com/contempo Thanks, Riva __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] FOUC problem
Thanks for the reply. Do you see the pages flash briefly before they load? What browser are you using? FOUC = Flash Of Unstyled Content. It is when your css loads after the page loads and IE shows the page flashing with no style for a second. Riva Christopher Blake wrote: whats fouc? I can't see much the matter. Christopher Blake [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] 07816163420 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] FOUC problem
I know! My client is not complaining but I would like this fixed. Thanks for the reply, Riva Dave Goodchild wrote: Well, you have link and script elements inside your head section, which is the classic antidote to FOUC, so not sure why that's happening. -- http://www.web-buddha.co.uk http://www.web-buddha.co.uk __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] FOUC problem
Thanks Rod. Zoe, I am using IE6 on Windows XP. The funny thing is, I only see it online (as opposed to on my computer). Riva __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] FOUC problem
I don't know. I tried putting a background image in the html page so it wouldn't look so obvious but it is hard to tell what flashes. Riva Zoe M. Gillenwater wrote: Riva, But as Rod said, is it just that the background image takes a second to load, or are the fonts and all other styles not loading right away either? Zoe __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] FOUC problem
Thanks for the reply Mike. Yes, it was the background I was talking about. I did replace the 7KB background image with a 2.3KB background image, so maybe that helps. What I did was to create a wide image across the whole page and set it as the background in the body tag so that it would appear as if the whole page had loaded without the flashing, but it doesn't seem to be helping. Riva Michael Geary wrote: Riva! Forgive me, but after your fifth message we still don't know what it is. I looked at your page in IE7 and FF2, and I do see a problem with the page loading in both browsers. The background image used in the sidebars flickers across the entire center area for a moment. I don't know if that's what you're talking about - I probably wouldn't call it a FOUC, it's more like a Flickering Unwanted Background After Reload. But now it sounds like that background is just a test, and there was some other problem you were seeing before you added it? Or is that the problem? Please help us out and tell us what we're looking for. :-) -Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] FOUC problem
Okay. I'll give it a try. As I said in the previous e-mail, the background is what flashes (well, that is what I don't like) and the text, etc. appears a second later. What would the other bug be? Riva Zoe M. Gillenwater wrote: Exactly. FOUC is a very specific bug. It means that *none* of the styles are loaded initially. I'm guessing they are, and it's just the background image that isn't loaded instantaneously. Again, Riva, do the styles on the fonts show up right away? Try making your text an outlandish color like bright red. Does that show right away? If so, it's not FOUC. It's a totally different bug. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] FOUC problem
I know. :-) Michael Geary wrote: And no offense intended! There was a virtual smileyface at the end of that sentence... :-) -Mike __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] FOUC problem
Thanks Shelly. I do have that in the page already. Riva Shelly wrote: Try adding this in your meat tags in the head of your document: meta http-equiv=Page-Enter content=blendTrans(Duration=0.1) See if that helps. ~Shelly __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] FOUC problem
Are you on dial up? That is not good. Riva Richard Grevers wrote: Basically, pay more for a faster server. I spent 11 seconds waiting while nothing happened, then saw a split-second flash of white (my default bg is grey, otherwise I wouldn't have seen it). before the page rendered fully over another couple of seconds. Take note that I have made a deliberate choice to disable Opera's default FOUC-killing delay, because I prefer to get text ASAP. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] FOUC problem
It is only the background that doesn't load initially. What other bug could it be? Riva Zoe M. Gillenwater wrote: Exactly. FOUC is a very specific bug. It means that *none* of the styles are loaded initially. I'm guessing they are, and it's just the background image that isn't loaded instantaneously. Again, Riva, do the styles on the fonts show up right away? Try making your text an outlandish color like bright red. Does that show right away? If so, it's not FOUC. It's a totally different bug. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Alignment problem
Hi all, I am trying to align a JavaScript image fade in/out in the center of my page and it works in IE but not in FF. Can anyone help me figure out what the problem is? I tried validating and keep getting errors (from the HTML validator) in the JavaScript. http://www.starqualitydesigns.com/contempo TIA, Riva __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Height problem in Firefox
Thanks David. I will try that.
As far as the menu being skewed left - I was trying to get too elastic
columns next to each other. I struggled with it and couldn't seem to get
it to work so I figured I would look into it later. Do you know any good
examples I could work from?
Riva
~davidLaakso wrote:
Do /not/ set a height, and try clearing it:
#wrapper {
/*padding: 0px;*/delete
/*min-height: 1500px; */ delete
padding-bottom: 50px; add (for a little lead under the last menu item.)
}
Add this selector to the style sheet:
br.both {
clear: both;
}
#wrapper is the first division to open. And it is the last division to
close.
Add this in the markup immediately before #wrapper closes:
br class=both /add
/div
/body
/html
It might be a good idea to validate the markup (you have used the same
id more than once on the page).
Is there a particular reason why the menu is skewed so far left?
Best,
~dL
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Height problem in Firefox
Eek - that's supposed to be two, not too. Can I blame it on the cold weather freezing my brain? Riva Portman wrote: Thanks David. I will try that. As far as the menu being skewed left - I was trying to get too elastic columns next to each other. I struggled with it and couldn't seem to get it to work so I figured I would look into it later. Do you know any good examples I could work from? Riva __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Height problem in Firefox
Thanks David. :-) Riva ~davidLaakso wrote: Maybe this one? http://blog.html.it/layoutgala/LayoutGala29.html ~dL __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Height problem in Firefox
Hi all, I am working on a restaurant website and am having a problem with the height of the main container (#wrapper) in Firefox. I tried using height: auto; and height: 101%; and height: inherit; and min-height, etc. and the container always ends before the menu does (the box with the thick grey border). If anyone can help it would be much appreciated. The page is at http://www.starqualitydesigns.com/contempo/menu_restaurant.htm The css is http://www.starqualitydesigns.com/contempo/contempo.css TIA, Riva __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Bulleting problem in IE
Thank you! Thank you! Thank you! I really appreciate your help. You
saved me a sleepless night - which I can ill afford.
Thank you.
Riva
francky wrote:
Hi Riva,
As Philippe wrote (in
http://archivist.incutio.com/viewlist/css-discuss/81092):
* Actually it is the { height: 1%;}. When the 'hasLayout' property
is triggered on a li, the bullet is displayed at the bottom of
a multi-line list item. That
is a bug that affect both IE 6 and IE 7.
Removing helps, but I discovered another 'hasLayout' trigger: the {
width: 250px; } in the li.
The { list-style-position: inside; } is not needed for IE better is
outside, for otherwise a second line is starting just at the same
vertical position as the bullet (inside = indented bullet). To
adapt, a bit extra padding-left for IE is needed, to save the bullets
inside the box.
To my surprise: they are related!
After making a testpage for the bullet thing, the 2 columns appeared
to stay fixed in IE , automatically, without any trouble shooting. :-)
See (source code in) the testpage
http://home.tiscali.nl/developerscorner/css-discuss/test-1stchoiceservices.htm.
The only IE misbehaviour I see now, is an unasked extra blue line
above the Services Treatments title.
Don't think so: IE is in worse shape CSS knowledge wise than we hope. ;-)
To know the reason of all inpredictible IE-bugs ... is often mystery
guessing!
And sometimes, there are mystery solutions. :-)
Success and greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Background problem
Hi, Thanks again to all who helped me with the bulleting problem recently. I have one more problem (I hope!) to sort out before I am done. I have a fake two column layout and find that in IE, the layout appears incorrectly and changes when you scroll down and back up again. I seem to remember seeing something like this somewhere but cannot figure out where. Any help would be much appreciated. http://www.starqualitydesigns.com/1stchoice TIA, Riva __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Bulleting problem in IE
Hi, I am finishing up a website for someone and find that some of the bullets are missing in IE. The page is here: http://www.starqualitydesigns.com/1stchoice/services.htm. Can anyone tell me why one bullet in the middle is missing in the first list and the first bullets are missing in the second and third lists? TIA, Riva __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Bulleting problem in IE
Thanks Francky.
Riva
francky wrote:
Hi Riva,
In IE there are no missing bullets, but all squares are displayed on the
bottom line of the list-item. If there is only 1 line, it doesn't
strike! ;-)
How to solve?
Maybe it has to do with IE's error handling of the html: validating
learns that you used br clear=both, which has to be: br
style=clear: both;.
If it is not that, IE could have difficulties with the
{list-style-position: outside;}, which you can omit with some playing
margins and paddings.
Or is it the * html li { height: 1%;}?
Hope this helps,
Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] shopping carts
Did you try Mals? http://www.mals-e.com. There are many different currency and postage settings. Contact me offlist if you want more help. HTH, Riva Phil Turner wrote: I need to find a shopping cart that can work out postage/shipping costs, paypal only allows one currency does anyone know a good one we only have one product to sell but need to include all the various postage costs. Using a mac and dreamweaver Also the middle section is pushing the right hand div to the bottom in I E - help anyone please http://www.philturner-uk.com/ypny/ Kind Regards Phil Turner FREELANCE CREATIVE TEL: 0161 439 1669 Chartered Graphic Designer MCSD BA Hons [EMAIL PROTECTED] http://www.philturner-uk.com V I S I T M Y D E S I G N B L O G http://www.philturnerdesigner.blogspot.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Aligning text field
Why don't you put the text fields in a box and the text in another box and float them next to each other at a certain distance? Riva Mário Gamito wrote: Hi, How can i in this page: http://www.gamito.org/wizard.php left align the text fields (dotted) at left in a certain distance from the text at its left ? Any help would be appreciated. Warm regards, Mário Gamito __ 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] positioning boxes
Can you post some code? That would help to see what the problem is. Riva raumin dehghan wrote: I thank a fellow developer for sending me links to more information on positioning, which I read, and I have done some further reading on it. However, I still am having some problems: I will have say, two boxes where I want them, and the third box I want WIDER. For some reason, every time I try to make the third box wider, when I preview in the browser it defaults to the same size. Anybody know why this happens? How can I make it wider? I am seriously thinking about using tables instead of boxes for positioning my page. Anybody else with positioning issues? I'd love to hear. Thanks, Raumin Dehghan __ 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] Can I center a UL menu?
Have you tried setting each li to a fixed width and then trying text-align: center;? Are they links or just li's? Riva Robert Tilley wrote: Although gaining experience with CSS, I consider myself a newbie. I would like to center a vertical menu with a column. -- | | | | | | Menu || | | | | || | | | |___|| | | || | | -- This is a rough mock-up of the goal. It should be possible to center the menu within the column. Centering the text-align attribute only causes all the menu items to center themselves in the list. Does a method exist to center the actual menu? My thought is to place the menu in its own div with the column, and then to center the menu div within the column. Can anyone more expert than myself comment on this proposed solution? Thanks, Bob __ 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] Food menu set up
Hi all, My newest website is for a gourmet restaurant and the menus have prices next to them per pint and per quart. I set the menus up as a ul and thought I would make another list with the prices and float it into place but I am wondering if there is a better way to do this? Also, it would mean two lists being floated (the pint prices and the quart prices) which could get problematic. Any ideas/suggestions would be most welcome. Thanks, Riva P.S. I don't have anything published yet to look at. __ 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] Inspiration - CSS menus
I was wondering if there is a site somewhere that has CSS based menus that I could get some inspiration from? I am looking for a vertical menu that is a little different and interesting but not weird. TIA, Riva __ 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] Inspiration - CSS menus
Thanks! Riva Marcelo Wolfgang wrote: Hi, I have this one, but it's not updated in a while: http://www.alvit.de/css-showcase/ HTH Grillo __ 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] Inspiration - CSS menus
Thanks Micky! Riva Micky Hulse wrote: Maybe this thread will help: *Design Resources and Inspiration!* http://snipurl.com/wm4k Good luck! Cheers, Micky __ 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] Link not working in Firefox
Thank you Francky. I appreciate the info and will look into fixing that. :-) Riva francky wrote: Hi Riva, I have searched too for some time (it's not an easy one!), and no solution, but I guess a direction. I noticed you've used temp borders for the containers in the css for your analysis. But in the css some containers are not mentioned (only the children of it) - and one of them seems to be it: the div id=bodypart. See testpage http://home.tiscali.nl/developerscorner/css-discuss/test-besthealth.htm. If you hover in FF from the left side over the nav bar, first the hovering is working on the Home Page link. But as soon as you move over the border line, at the o of Home, the the link disappears. All other links in the nav-bar don't work either in FF. - And coming from the right, the link Comments % Questions is working until you reach the red border again: at the u of Questions [1]. Why this bodypart-div doesn't start under the MEMBERSHIP IS FREE! line, but at the top of the screen, I don't see at the moment. It has to do something with the (table in the) form: when you omit the form, the links in the nav-bar are coming back. Greetings, francky [1] These are the letters at normal font size on 1024x768 resolution. __ 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] Link not working in Firefox
Gee, thanks for sending that. Can I ask when you did it? I updated the page recently and was wondering if that is something I created by fixing the link problem. Thanks, Riva Dave Pierce wrote: Roger Rapidly Rote...(hey, hooked on phonics works!) Roger, dunno about the links, but there's a small problem in Safari 2.0.4...See screenshot at http://www.pierceartanddesign.com/pages/testshots.html and notice the overlap of the we identify top products line over the Welcome lines. Also the search box seems pretty squashed up inside. Regards, Dave __ 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] Link not working in Firefox
I was afraid of that. Thanks. P.S. Is Safari a free download? Dave Pierce wrote: Riva, Saw it about half hour ago. Dave __ 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 not working in Firefox
I am almost done with a site that worked until I added a link to the home page. The link works fine in IE but not in Firefox. I have searched high and low and am close to pulling my hair out - if someone could tell me why it won't work in Firefox, I would be most grateful. Thanks, Riva http://www.starqualitydesigns.com/BestHealth __ 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] Link not working in Firefox
Thank you Roger. I have been staring at this page for so long I don't know what's what anymore. Riva Roger Roelofs wrote: Riva, #bodypart is covering up the links. It has a relative position top of -110px and a margin-top of -120px This pulls it way up over the header. hth __ 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 on hover breaks in higher text size
I put something on a website that replaces an image of the body with other images so it looks like certain parts are highlighted depending on where the mouse is, but I find that when I make the font size bigger in IE, the images kinda cascade down (instead of cleanly covering the base image.) Page can be viewed here: http://www.starqualitydesigns.com/BestHealth. Can anyone tell me why this is happening and/or how to fix it? TIA, Riva __ 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] Image on hover breaks in higher text size
Thank you for the reply and the advice. :-) Riva Gunlaug Sørtun wrote: regards Georg __ 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] Remote rollover question
I am working on a site that has sections based on different parts of the body. My client would like parts of the body (I have an outline next to the links) to be highlighted when you mouseover the links and/or have the links become active when you mouseover the body part. The links have drop downs so I don't know if it is possible (or even a good idea) to try and make the drop down appear with a mouseover on the body part. I have seen Andy Budd's page on this and it didn't help. Any ideas/advice/suggestions would be appreciated. Thanks, Riva __ 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] Remote rollover question
Thanks Don. I didn't think of an image map. Riva Don Miller wrote: You can use an image map to create link on the body picture. I think you need Javascript if you want a text link to also highlight the link area on the body graphic. Start with looking up how to create an image map navigation and then decide if you still need JS. Don __ 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] CSS vs. DHTML?
Thanks for the reply Dave. Yep, I guess JavaScript would make it a moot point. My boss wants a menu similar to Slashdot's menu (www.slashdot.org) but that uses JavaScript. Could that be redone only using CSS? Riva Dave Goodchild wrote: DHTML depends on JavaScript, so it's a moot point. Not all clients will have DHTML enabled, and it is perfectly possible to create a menu in css that will look fine in most browsers - especially since we may be able to say goodbye to the box model hack with the advent of IE7 being shipped to XP users very soon. However, it all depends on what you want to achieve. What kind of menu are you required to create? -- http://www.web-buddha.co.uk http://www.projectkarma.co.uk __ 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] CSS vs. DHTML?
Hi, My boss wants me to put a menu on her new website but she wants me to use DHTML and not CSS. She says that DHTML is more robust and will look better in all browsers (she wants to go international) - can you do one without the other? Is it true? (I don't think so but I am not so well versed in DHTML to argue.) Any opinions would be much appreciated. Thanks, Riva __ 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] CSS vs. DHTML?
Thanks Joel. [EMAIL PROTECTED] wrote: This might work for you: http://www.howtocreate.co.uk/tutorials/testMenu.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] Middle column height
Hi all, I have a 3 column layout on one of my websites and the center column has a lot of empty space at the bottom. I cannot figure out why. I put in height: auto; and height: inherit; and even left that out altogether but to no avail. There is a button to the home page at the bottom that I could just raise up, but then the copyright part is way down at the bottom. Any help would be much appreciated. http://www.starqualitydesigns.com/BestHealth/links.htm Thanks, Riva __ 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] Middle column height
Thank you Gunlaug. I tried floating in the beginning and it didn't look
good, but I will look at it again.
Riva
Gunlaug Sørtun wrote:
Most of the extra height is buried here...
ul.nava1 {top: -1735px;}
Using relative positioning like that is bound to fail, as the space
needed for that element is already occupied by it, and that doesn't
change regardless of where you move it to. Thus you have at list 1735px
extra space at the bottom of the center column, and you can not
compensate for it by adding more repositioning to other elements.
So, you'll have to eliminate all (or almost all) repositioning-attempts
based on 'position: relative', and go back and make your original (now
commented-out) float layout work.
regards
Georg
__
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] CSS mouseover to look like buttons
Hi all, I am changing a JavaScript menu to CSS for the mouseover and wanted to make it look like it was still a button that depresses on mouseover. I tried fiddling with adding a border on mouseover (the same color as the background) but it moves all the links, not just the one I am hovering over. Any ideas/help would be much appreciated. Thanks, Riva http://www.starqualitydesigns.com/BestHealth/newmenuindex.htm __ 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] CSS validation question
Hi Peggy, Can you send a link to the page? Riva Peggy Coats wrote: When I'm validating my CSS, I keep getting warnings such as listed below using the W3C validation service: - Line : 5 (Level : 1) You have no color with your background-color : body - Line : 11 (Level : 1) You have no color with your background-color : #content - Line : 29 (Level : 1) You have no background-color with your color : h2 - Line : 36 (Level : 1) You have no background-color with your color : #text - Line : 55 (Level : 1) You have no background-color with your color : #nav In each of these instances I DO have the color attritubes identified with a hex code, and the respective element validates later in the results. I'm confused! Am I missing something here? Thanks, Peg __ 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] blink bug
I don't see the blink, but the site is really weird in IE. Riva N.Sorokin wrote: Hi all! I have some crazy bug on my site: http://sorokin.cc/indexx.html When you click on the menu which is located in left corner, you have blink in right corner. Can somebody help me? Cheers, N.Sorokin __ 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] Drop down menu not working in IE
Hi all, I reworked one of my sites so that it has two columns - one on either side of the content. I copied the drop down menu (next to the picture of the body) straight from the original into the new version, but now it does not work in IE. I am losing my mind trying to figure out what the problem is. Any help would be much appreciated. The page is here: http://www.starqualitydesigns.com/BestHealth/index2.htm, and the css is here: http://www.starqualitydesigns.com/BestHealth/newbest.css. TIA, Riva __ 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] FW: List Menu
I don't see any line-height attribute in the li's. Also, try checking the padding. HTH, Riva Christina Hawkins wrote: Trying to get my list menu to work properly on IE and FF. So far on FF the menu hover works but the line-height/spacing between the li's are too small. In IE the line-height is fine but the hover isn't working. Can someone help me figure this out? I've already spent too much time on this and it's driving me crazy. http://www.globalspex.com/clients/fifthsister/index.php http://www.globalspex.com/clients/fifthsister/style_main.css Thank you, Christina Hawkins www.globalspex.com __ 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] FW: List Menu
DId you try putting the line-height in ems? Also, I don't see a
line-height on the hover state - just an idea.
Riva
Christina Hawkins wrote:
Thanks, Riva.
I tried line-height: 14px and 2.5em in the li and a classifiers under
#navlist.
Both give me the same result as if I'd didn't have it.
Also, why is the rollover effect I want working in FF but not IE?
#nav {
width: 185px;
position:relative;
background-color:#983539;
background-image:url(graphics/backgd_nav.gif);
background-repeat:no-repeat;
height: 183px;
left: 5px;
top: -40px;
line-height:14px;
color:#FF;
text-align:left;
font-weight:bold;
font-size:12px;
}
#navlist ul{margin: 0; padding: 0; list-style-type: none;}
#navlist li{margin: 0; list-style-type: none; line-height:14px;}
#navlist a {
display: block; padding: 2px 0 0 10px; margin:0; color:#FF;}
#navlist a:link, #navlist a:active, #navlist a:visited {
color:#FF; text-decoration:none;}
#navlist a:hover {color:#00;
background-color:#FF;
filter:alpha(opacity=75);
-moz-opacity:.25;
opacity:.25;
}
Christina Hawkins
__
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] Background flashes
I am also using IE6 on WinXP . . . Dave Goodchild wrote: Looks fine to me in IE6 on Win XP. -- http://www.web-buddha.co.uk http://www.projectkarma.co.uk __ 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] Background flashes
Hi Kieron, Thanks for the reply. The transition: meta http-equiv=Page-Enter content=blendTrans(Duration=0.1) is what solved the problem. :-) Riva Kieron McIntyre wrote: Hi Riva, I have tested the site in IE5, 5.5, 6 and 7 and I can't replicate the issue you describe. You do have a transition set on each page: meta http-equiv=Page-Enter content=blendTrans(Duration=0.1) This may be causing what you see. Alternatively, try setting no-repeat on the background image since the image is static. Kieron McIntyre www.digbyswift.com www.cssfilters.net __ 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] Background flashes
Ah, that explains it. :-) [EMAIL PROTECTED] wrote: hah.. yeah, that could do it. and would explain why I didn't see it. transitions drive me batty, so I disabled them in the browser. __ 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] Background flashes
Hi Francky,
The reason behind the double reference is editing that I forgot to undo.
I saw articles on line about putting the image inside something but not
something else, etc. and so I tried it. Thank you for pointing this
out. I will remove it.
Riva
francky wrote:
Hi Riva,
I noticed in some pages there is a double reference to the background
image: one in the css body { background:..} but one in the html as
well: body background=images/backgroundjune.jpg. For instance in:
index.htm, whatis.htm and expect.htm.
Then in the css there is also a * html #bodytext {...} with the same
bg-img.
Maybe reasons why IE is flashing (or maybe not, it's IE ;-) ).
And in some pages there is a /div too much (under/above the footer,
depending on the footer inside the wrapper or not).
I suppose this are some rests of earlier tests. Deleting them will
diminish (but not exclude) the risk of strange things happening in IE
(and others).
Should be good to give the html-validator
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.starqualitydesigns.com%2FMoodus%2Fexpect.htmcharset=%28detect+automatically%29doctype=Inliness=1verbose=1
a chance every now then! :-)
And the css-validator
http://jigsaw.w3.org/css-validator/validator?profile=css2warning=2uri=http%3A%2F%2Fwww.starqualitydesigns.com%2FMoodus%2Fexpect.htm
as well. :-)
Greetings,
francky
__
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] Background flashes
Hi all, I designed a website that has a big picture on the background (per the _client's_ request) and I find that the background flashes in IE - not just once, but every time I go to the page. I tried all the usual fixes I could find and even cleared the cache, but it is still happening. Any advice would be much appreciated. The site is here: http://www.starqualitydesigns.com/Moodus/ Thanks, Riva __ 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] Background flashes
I am using IE6 on WinXP on a PC. Weird. [EMAIL PROTECTED] wrote: In which version of IE in which OS are you having the problem? I looked at it in IE6 for Win2K and had no problem with flashing. -- Marc Luzietti Flagship Project Bayview Financial, L.P. (305) 341-5624 __ 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] Background flashes
You are a genius! Thank you. That worked wonderfully!! Riva 2geedesign wrote: Try adding meta http-equiv=Page-Enter content=blendTrans(Duration=0.1) into the head/head section of each page. This slows deleting of the old page. IE has a fade-out/fade-in option when changing webpages. Setting the fade time 0 .1 sec is harmless for the visitor, and long enough to prevent flickering: Hope this works. Ian __ 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] Background flashes
Thanks Nick. Nick Fitzsimons wrote: Have look at http://archivist.incutio.com/viewlist/css-discuss/72983 in the list archives and see if it helps - I know the original question was to do with :hover, but a large background image would show the same effect. There are other related posts in the archives; see http://www.google.co.uk/search?q=site%3Aarchivist.incutio.com+background+image+ie+flicker HTH, Nick. __ 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] Weird problem - disappearing div in IE
Hi, I am working on a site that has a copyright blurb at the bottom. I finally figured out how to place it but find that it disappears in IE (especially on the about.htm page). The page just stops and won't scroll down any further. Any help would be much appreciated. I validated the html and the css. Site here: http://www.starqualitydesigns.com/BestHealth Thanks, Riva __ 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] [Bulk] Re: Weird problem - disappearing div in IE
Hi Chris, Unfortunately, it is intentional. The client wanted that and I told him that it didn't sound right but he thinks it is an easier way to remember the URL instead of besthealthproductsinamerica.com. No intrustion. LOL - it is good to know that I am not the only one who thinks that is odd. Riva Chris Williams wrote: None of my business, and not the question you asked, but... In some places it refers to besthealthinusa.com (like in the logo) and others it is besthealthinamerica.com (like in the text). Confusing? Intentional? Anyway, forgive my intrusion, just wanted you to know... Chris __ 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] Weird problem - disappearing div in IE
Thanks for the reply Georg. It didn't help though. :-(
Gunlaug Sørtun wrote:
Quick-fix, add:
* html #bodytext {padding-bottom: 15em;}
...but there are probably better solutions around.
regards
Georg
__
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] Links not working IE/PC
I had a similar problem recently and validated my css and html and that fixed the problem. HTH, Riva Christy Collins wrote: I have some pages where the links in the body text can't be clicked in IE/PC. Could anyone point me in the direction of what might cause this to happen? -C __ 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 6 postion:absolute problem
Hi Grillo, Try validating your page - I had a similar problem recently and when I ran a validator (an extension to FF, btw) I found a couple of things that were fixed and the page worked in IE. HTH, Riva Marcelo Wolfgang wrote: Hi list, I've searched for this error in the wiki and couldn't find any specific information about this. I have this page: http://work.grillo.tk/vilarigno/home.html and IE 6 isn't respecting the position:absolute of the badge... it works fine in FF and IE 7. Can someone take a look a share any clue why this is happening ? TIA Grillo __ 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] Resolution question
Hi all,
I am reworking a site (it is still in the very rough beginning stage)
and I find that when I set everything lined up in 600x800 and switch to
1024x768, the spacing changes and vice versa. Is there some way to make
the right edges line up no matter what the resolution? The url is:
http://www.starqualitydesigns.com/Moodus/whatis.htm and the css is:
body {background: url(images/stripeblueback.gif) repeat; color: white;
margin: 0; padding: 0;}
div {border: 1px solid #335;}
h1, div {
background: transparent;
color: black;
margin-bottom: 5px;
}
p {
margin: 1em 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;}
span.leader {font-style: italic;}
span.label {font: italic 1em Arial, sans-serif; letter-spacing: 1px;}
h1, h3, h4 {
font-family: Arial, sans-serif;
font-style: italic;
font-weight: normal;
margin: 0;
text-transform: lowercase;
border: 0;
}
h1 {
letter-spacing: 0.75em;
color: #369;
padding: 0.25em 0.33em 0.125em;
border: 3px double #224;
background: #369;
margin-top: 5px;
margin-left: 15px;
margin-right: 15px;
}
h3 {font-weight: bold; color: #113;}
h4 {
font-weight: bold;
letter-spacing: 0.5em;
padding: 0.33em 0.5em 0.167em;
border-top: 1px solid #335;
border-bottom: 1px solid #557;
background: #336699;
color: #335;
}
div#behind {
position: relative;
float: right;
top: 30px;
z-index:1;
width: 40%;
height: 600px;
border: 0;
padding-right: 6px;
background: transparent;
text-align: right;
margin-right: 40px;
display: inline;
}
div#sidebar {
position: absolute;
top: 7.2em;
left: 0;
width: 15%;
background: transparent;
padding: 0;
margin: 1em;
border-width: 0;
}
div#sidebar div {
margin-bottom: 1em;
margin-top: .75em;
}
div#sidebar a {
display: block;
margin: 0;
padding-top: 0.25em;
padding-bottom: 0.25em;
letter-spacing: 1px;
text-align: center;
font-weight: normal;
border-bottom: 0;
color: #224;
background: #338;
font-size: 12px;
text-decoration: none;
}
div#sidebar a:link {color: #226; background-color: transparent;}
div#sidebar a:visited {color: #224; background-color: transparent;}
div#sidebar a:hover {background-color: #224; color: #338;}
div#sidebar a span {display: none;}
div#demos {
border: 3px double #224;
background-color: #6699CC;
font-family: Arial, Helvetica, sans-serif;
}
div#demos h4 {
background: #369;
color: #224;
text-transform: uppercase;
font-style: normal;
text-align: center;
}
div#demos a {
font-face: Arial, Helvetica, sans-serif;
color: #224;
background-color: #99ccff;}
div#demos a:hover {
background: #336699;
color: #6699cc;
}
div#sidebar a#gallery {border-top: 4px solid #88B; font-size: 90%;}
div#resources a {font-size: 90%;}
div#note p {margin: 0; padding: 0.66em; font-size: 80%; font-family:
sans-serif; line-height: 1.33; color: #335;}
div#sidebar div#credits a {padding: 0.33em 0.66em 0.167em 0.66em;
letter-spacing: 0; font-weight: normal; text-align: left; font-size: 90%;}
div#main {
position: absolute;
top: 8.2em;
left: 16.5%;
width: 73%;
margin: 1.2em;
margin-top: 2em;
padding: 1em 1.5em;
border: 3px double #224;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background: #6699CC;
letter-spacing: 1px;
color: #000;
}
div#main p {
position: relative;
float: left;
top: 5px;
left: 10px;
background: transparent;
width: 50%;
padding: .5em;
border: 0;
}
div#main h3 {letter-spacing: 3px; margin: 1.25em 0 0;}
div#main h3#top {
margin-top: 0;
color: #224;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
text-transform: uppercase;
background: transparent;}
div#main p {margin: 0.25em 0 1em; line-height: 1.25em;}
small {letter-spacing: 0; font-size: 85%;}
div.NN4 {display: none;}
TIA,
Riva
__
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] [Bulk] Re: Resolution question - sinai
Sorry about that. I guess I wasn't thinking. Thank you for the links. As I said, the page is still in a very rough stage so I will look at these and incorporate them. Riva Felix Miata wrote: There's really no reason to list all of your CSS in your post, as it is easily loaded from the page using it by any of us using good web tools, such as the Firefox Web Developer extension. Here's what I see: http://mrmazda.no-ip.com/SS/rivapo1.jpg 217k hires screenshot http://mrmazda.no-ip.com/tmp/showcase-rivapo.html SS setup page related links Please note the disclaimer at the bottom of the setup page. What right edges are you trying to line up with what? Don't design for resolutions: http://www.html-faq.com/webdesign/?resolution Make your pages adapt to user environments instead by sizing in ems and leaving most content text alone: http://css-discuss.incutio.com/?page=EmVsPercentWidths Tiny text can't be resized with IE's text resizer, and is web users' biggest complaint: http://www.useit.com/alertbox/designmistakes.html What web site visitors want: http://mrmazda.no-ip.com/auth/bigdefaults.html#sizeresources The nature of the web: http://www.xs4all.nl/~sbpoley/webmatters/essence.html Related links: http://www.lighthouse.org/about/accessibility/bigtype_top10.htm http://mrmazda.no-ip.com/auth/accessibility.html Page of more related links: http://mrmazda.no-ip.com/auth/wauth2.html HTH __ 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] Resolution question
Thank you for the reply Francky. Riva francky wrote: Hi Riva, As you see, the header (here the h1) has a fixed margin-right of 15px, while the #main container is positioned in % of the screen width, combined with margins in em's. One right side is fixed, and one is flexible in general it's not lining up. - Also within one resolution there can be differences: as you resize the window, you see the header staying at the 15px from the right, but the content-container is moving from more distance to less distance. Setting both in the same way (I shoud say: the 15px fixed) will solve the problem. That is: the #main can be positioned at right: 15px with a margin: 0 1.2em (only top/bottom), and a % for the width. The left: 16.5% then can be canceled. Greetings, francky __ 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] Inserting a JavaScript image slideshow
Thanks Debbie. I will look at that. Iorhael wrote: 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 http://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] Inserting a JavaScript image slideshow
Hi all, I have been lurking for a while . . . I was wondering - if I want to insert a JavaScript slideshow in a CSS page, do I just insert it between div/div tags or is it more complicated? I tried it briefly and the spacing went haywire. Is there a better way? Flash? TIA, Riva __ 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] Inserting a JavaScript image slideshow
Thanks for the reply Chris. I don't have a page up yet - still fiddling with it but I will look at the link you sent. :-) Riva Christian Heilmann wrote: Depends on the image slideshow I presume. Mine is no issue to add in a CSS page: http://www.wait-till-i.com/index.php?p=260 If you give us more information about the slideshow we might be able to help you more. A URL would be best. HTH Chris __ 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] Web site pages flashing in IE.
Hi, I redid my website with css and find that the only problem now is that it flashes when you surf from page to page. I googled and found a bunch of sites and tried a number of known solutions but none have worked so far. Any ideas would be much appreciated. http://www.starqualitydesigns.com Thanks, Riva __ 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/
