[css-d] 1px jog help
Hi everyone, I have a layout that is falling victim to the 1px jog in firefox and wonder if there is somebody could lend a hand. The testing url is http://www.flexcomp.ca.php5-10.websitetestlink.com/ I understand a popular solution is to house the body's background image in a 100% high container instead. While this seemed to work for the vertically repeating image, the use of the next background image at 1600px wide created a very wide site. Maybe I just didn't implement it properly or could be doing this another way? Thanks for any input. __ css-discuss [cs...@lists.css-discuss.org] 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] 1px jog help
Thanks for the speed! I've made the suggested changes and am seeing the jog still in firefox 3.0.7. It is most apparent just above the logo in the header when the window is resized slowly. Hmm... any other thoughts? On 11-Mar-09, at 11:35 AM, Gunlaug Sørtun wrote: rollandburn wrote: I have a layout that is falling victim to the 1px jog in firefox and wonder if there is somebody could lend a hand. The testing url is http://www.flexcomp.ca.php5-10.websitetestlink.com/ Your layout is falling victim to a designer induced bug :-) Set margins/paddings to zero on all sides on body - not '0 0 0 1px' as you have now, and it'll be fine in all browsers. regards Georg -- http://www.gunlaug.no __ css-discuss [cs...@lists.css-discuss.org] 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] PNG background repeat-y problem in IE6
Hi everyone... I have an IE6 issue that I could really use some help with. The site is here http://www.earthsys.ca/Careers/ (index page not working yet) It seems that the vertically repeating background image on my #container div will only reach down so far on pages with longer content, only in IE6. If I then shift refresh the page the background fills the container as expected. I have the Twin Helix png htc working, and have added its associated js file that tiles png backgrounds, in my case vertically. Sometimes it works, sometimes it doesn't. Can anyone see any conflicting css or problems that may instigate this background repeat problem? thanks! __ 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] IE is clipping my AP block
Hi everyone, I have an absolutely positioned h1 tag (with basic image replacement) nested inside a div. IE 5.5 6 'clip' the parts of the h1 background image that are outside the parent div and I'm not sure why. It looks like it has all the ingredients for the Clipping over the edge section of the famous 'On Having Layout' article except I am not using negative margins opting for top: and bottom: instead. And, adding a dummy div and giving layout as the article suggests does not fix the problem...so, I'm not sure what's going on. Any suggestions are appreciated. here is an IE 6 screen shot of the offense http://carruthersfoundation.com/images/clippage.png Thanks! __ 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] Suckerfish IE7 menu 'sticking'
I am so happy to have the help of all of you. really. I am not a
'natural' at this which makes for some pretty stressful deadlines and
I cannot express how much weight you have taken off my shoulders by,
well not just helping me, but by outright giving me the answer darnit!
Thanks alotI'm sure I'll be back!
On 25-Jan-08, at 11:24 AM, Alan Gresley wrote:
Message: 20
Date: Fri, 25 Jan 2008 10:31:29 -0500
From: rollandburn [EMAIL PROTECTED]
Subject: Re: [css-d] Suckerfish IE7 menu 'sticking'
To: css-d css-d@lists.css-discuss.org
Message-ID: [EMAIL PROTECTED]
Content-Type: text/plain; charset=US-ASCII; format=flowed; delsp=yes
Oh mani am not set up for this kind of bug testing! Thanks
Kevin.
rolland
On 25-Jan-08, at 10:24 AM, Kevin Evans wrote:
Hey Rolland,
Your answer is here:
http://css-class.com/articles/explorer/sticky/index.htm
Kevin
Don't have to bug test. Just stick this in the CSS code for the menu:
#nav li:hover {background-position: 0 0;} /* fixes sticky submenus
in IE7 */
The article just delves into the mystery of the bug.
Alan
http://css-class.com/
__
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] Suckerfish IE7 menu 'sticking'
Oh mani am not set up for this kind of bug testing! Thanks Kevin. rolland On 25-Jan-08, at 10:24 AM, Kevin Evans wrote: Hey Rolland, Your answer is here: http://css-class.com/articles/explorer/sticky/index.htm Kevin On Jan 25, 2008, at 10:09 AM, rollandburn wrote: I wonder if anyone could lend a hand with a problem i am having with a sons of suckerfish menu in ie7.. I did half this site while sick as a dog and am regretting some of the groggy decisions I made but today is launch day and I am kinda stuck with hacking at what I have. The complaint I am getting only seems to be present in IE7. I say this because everything is fine on my mac and my parallels IE6/Firefox shows no problems. The IE7 client says, How come when I move my cursor over the menus, they don't roll back up ... I mean they stick to the screen (so to speak) and if I click into one of the menus, say Contact for example, the rest of them don't have the pull-down menus anymore. They become static and I can only use the ones along the left side.. I can't even check this which is pretty embarassing. Any help is greatly appreciated. rolland __ 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/
[css-d] Suckerfish IE7 menu 'sticking'
I wonder if anyone could lend a hand with a problem i am having with a sons of suckerfish menu in ie7.. I did half this site while sick as a dog and am regretting some of the groggy decisions I made but today is launch day and I am kinda stuck with hacking at what I have. The complaint I am getting only seems to be present in IE7. I say this because everything is fine on my mac and my parallels IE6/Firefox shows no problems. The IE7 client says, How come when I move my cursor over the menus, they don't roll back up ... I mean they stick to the screen (so to speak) and if I click into one of the menus, say Contact for example, the rest of them don't have the pull-down menus anymore. They become static and I can only use the ones along the left side.. I can't even check this which is pretty embarassing. Any help is greatly appreciated. rolland __ 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] Margin (?) problem with menu.
Hi everyonecan anyone spot the Waldo in my css on this page... my dev site is athttp://public.alliancepacific.com/Corporate/About_Us I am having a hard time finding out why the top level UL's appear to have a margin which does not allow the menu to squeeze up to the header. If anyone could give me a hand I would really appreciate it. Thanks! rolland __ 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] Margin (?) problem with menu.
jeezthat was too easy. Sometimes when you stare at something for hours on end its hard to see the simple solutions. thanks alot David. On 22-Jan-08, at 11:01 AM, David Laakso wrote: rollandburn wrote: Hi everyonecan anyone spot the Waldo in my css on this page... my dev site is athttp://public.alliancepacific.com/Corporate/About_Us I am having a hard time finding out why the top level UL's appear to have a margin which does not allow the menu to squeeze up to the header. If anyone could give me a hand I would really appreciate it. Thanks! rolland Reduce the height set on the header to around 146px. Best, ~dL -- http://chelseacreekstudio.com/ __ 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] Explorer bug or poor css technique?
Well thanks for taking the time to take and post screenshots Dave, I can see that 'poor css technique' is where you are headed with that one. I know that the menu items start to wrap with the first two text size increases. A solution to that could be to either remove a menu item or narrow the graphics. With regards to the zoom problem shown in your screenshot, it looks like the background image did not 'expand' with the rest of the layout/images, I wonder if that is because it is a background image on the 'body' and not a wrapper type div. Having said that, the layout is 1000px wide and I don't know anyone who comfortably browses webpages wider than that (not saying they don't exist). Yes, though, it is a problem. I work on a Mac and find it fairly frustrating to design for pc's, IE6/7, coming here to ask for 'site check please' everyweek seems abusive. I wish there were an easier way. Now that the shortcomings of my layout are now out in the open, can you make a few suggestions on how to remedy? Thanks Sadly, that menu, and other parts of your layout, do not survive any kind of text resizing or, in the case of IE7, any zoom level beyond 100%. Sorry. IE7 Win xp Screen shot: http://webwiz.robinshosting.com/temp/discandmore.png Cordially, David On Wed, 11 Jul 2007 16:01:30 -0400, rollandburn wrote: Well Jumpin' Jehosaphats! Blasted hasLayout got me again...hehe. I even went to satzandsatz.de to read On Having Layout, for the third time while waiting for the gurus to finish lunch. Thanks Georg. btw...That menu is a direct rip from Stu Nicholls at cssplay.co.uk so I pass all the credit to him. __ 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] Explorer bug or poor css technique?
Thanks everybody, I really appreciate all the help and feedback! Gonna go install Parallels and do some searching on if I can have multiple IE's on the same OS. =] __ 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] Explorer bug or poor css technique?
Hi everybody, I wonder if a kind soul could take a look at ... http://www.discandmore.com ...to help me figure out why internet explorer doesn't allow vertical scrolling past a certain point effectively 'cutting off' content at the bottom of the page, such as the footer. Firefox shows the page as it should be for reference. Thanks __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Background Image flash on initial hover
Hi everybody, just wondering if anyone can shed light on why the background image on the LAWYERS click here to JOIN NOW! link flashes blank for a second upon initial hover on this site http://mrrepublic.aphexhosting.com/MRRE_for_Lawyers/ Thanks for checking Rolland __ 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] whatever:hover variation for css menus
i don't know much about js but have been using the famous peter ned whatever:hover file on most of my projects. while surfing around on my weekly menu hunti discovered a (very nice) site at http://solardreamstudios.com/learn/css/cssmenus/ where the author seems to have written his own version of the peter ned file to go with his (what seems to be) pretty clean horizontal and vertical css menu system. I would like to try out his menus but am leary of anything not as popular as the peter ned implementation. Is there anyone that can take a look at the js and say if it will affect a css menu just like peter ned's? Does peter ned's whatever:hover cover more bases than this authors file? Thanks rolland __ 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 float problem
Hi everybody, I wonder if someone could take a peek at the following url and tell me why my left floated menu is pushing content below it (as if it had 'clear' applied to it) in the content area to the right, only in IE. http://www.medicineshoppesarnia.com/question_answer_corner/ Thanks alot. !! __ 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] Layout check please- was Table squirting out of DIV
I just wanted to say thanks for the help and patient explanations. CSS is a very complicated subject and hopefully someday I will be able to help others as you have helped me. =] Rolland __ 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] Layout check please- was Table squirting out of DIV
Hi Gunlaug, thanks for the explanation. After reading the ALA
article on negative margins I think I understand the reason for the
LayoutGala #wrapper around #content and why I don't need it. My
source order has the #sidenav before the content and it isn't
floatedso the css ends up being much simpler and there is no need
for the #wrapper. I think the main point I have missed in the past
is, margins (and thus, negative margins) are handled differently for
floated and inline elements than they are for non-floated block-level
elements.more news to me and possiblly the missing link to my
misunderstandings. Now I just have to find info on 'why how' they
are handled differently. Thanks againand I'll be back! hehe...
==
rollandburn wrote:
http://blog.html.it/layoutgala/LayoutGala24.html
div#wrapper{float:right;width:100%;margin-left:-200px}
div#content{margin-left:200px}
Try to think of it like this:
1: div#wrapper will show up as a 100% wide float-container, but will
/only take up space/ equivalent to '100% minus 200px' (regardless of how
much that is).
That leaves 200px empty space on the left side.
2: div#content will stay 200px away from the left edge of div#wrapper,
so it won't cover up the empty space on the left side.
Result: there's 200px empty space for 'navigation' and 'more stuff here'
to stay in.
Method with 'negative margins' on floats is best described here...
http://www.alistapart.com/articles/negativemargins/
and your LayoutGala example is just a variation.
This example on my site is a bit overdone...
http://www.gunlaug.no/contents/wd_demo_float_03.html
but the entire page-layout and the 'removed floats' rely entirely on
the same 'negative margins' method as described in the ALA article. A
useful bit of standard float-behavior.
regards
Georg
--
http://www.gunlaug.no
__
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] Layout check please- was Table squirting out of DIV
Hi again and thanks Gunlaug. I don't feel so inept when the solution
is something I wouldn't have thought of in a million years...hehe.
Both of your suggestions worked perfectly to fix the footer width and
gecko 1px line problems. And you are correct, my test page did not
validate but it should now validate as html 4.01 strict.
The fact that IE doesn't understand XHTML is news to me and makes me
wonder if why I've been using XHTML all this time. (embarassment =
[) I think I may have made a mistake saying, only used by IE on
pc's in North America I should have just left it at, should
support firefox and ie on mac and pc. Sorry for the confusion.
The LayoutGala page with the margins that seemed to cancel each other
out still confuses me. The html has a #wrapper directly around only
the #content. My confusion comes from not knowing why this example
needs to shove the #wrapper to the left, then push the #content back
to the right the same amount. What problem does the #wrapper solve
that makes its use necessary?
http://blog.html.it/layoutgala/LayoutGala24.html
div#wrapper{float:right;width:100%;margin-left:-200px}
div#content{margin-left:200px}
div id=wrapper
div id=content
...
/div
/div
Thanks!!!
=
Your test page isn't XHTML 1.0, so you should clean it up first, or
change it to HTML 4.01 and mark it up accordingly.
http://validator.w3.org/check?uri=http://rollandburn.com/index.html
Don't know how your original page is, but the same standard-requirements
should be applied to that too. No IE-version understand XHTML anyway, so
you may as well change it since IE-only is one of _your_ requirements.
Having written that: it shouldn't be much of a problem to clean it up
and turn it into proper XHTML, that survives if served as
'application/xhtml+xml' if _that_ is a requirement (it is according to
W3C). I just did, and all standard-compliant browsers rendered it
perfectly, but IE/win will of course not play ball. Maybe IE8 will :-)
--
When scrolling to the right in IE/PC, I notice the footer doesn't
stretch along 'x' plane all the way when the table is really wide
IE/win lose track of how wide the page really is, and limits the
footer-width to the window-width. It is sometimes a tricky one.
Here is a future-safe hack for IE6 and older versions, which must be
placed - completely with @media rule and all - after all other styles.
Will make IE6 behave - or appear as if it does.
@media screen {
* html #footer {
float: left;
width: 5000%;
margin-right: -4999%;
}
}
I have no idea how IE7 renders that footer, but it won't be disturbed by
the above hack. Neither will any other browser.
In Firefox PC and Mac i notice at the bottom of the footer a baby
blue 1px horizontal line where the background image shows through. It
comes and goes with keyboard font resizing.
The overprecise calculation in Gecko tends to hit and miss a bit.
The simplest cover-up in your case is to pull up the bottom margin on
the footer.
#footer {margin-bottom: -1px)
...should do.
-
Regarding margins seem to cancel themselves out..., is not so.
The #content {margin-left:12em} is positioning that container so far
from the left edge of #container to make space for navigation. If you
don't need navigation, then you simply change that margin to zero.
Example:
body#with-nav #content {margin-left:12em;}
body#no-nav #content {margin-left:12em;}
...or something like that.
I don't know how many eventualities you have to cover with this layout,
so I can't say if this layout CSS has all the bases covered or not.
Given proper (and clean) markup I can't see any problems with it in any
of my browsers.
regards
Georg
--
http://www.gunlaug.no
__
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] Layout check please- was Table squirting out of DIV
sorry if this is posted twice.. Hi again, This began as [css-d] Table squirting out of DIV but Zoe helped me fix that so I thought I'd start a new thread for some of my other questions. Below is a url for referencethe original page I'm working on is secured and isn't accessible to the public. I tried to include as much information as possible for anyone feeling kind enough to help. I am using http://blog.html.it/layoutgala/LayoutGala24.html as a starting point for reference. http://rollandburn.com/index.html Thanks! Hi everyone, thank-you Zoe for the suggestion to use display: table- cell to sort out my squir..ahem, overflow problems. Unfortunately this nullifies the margins I have applied to the div that are necessary for layout. Applying padding to compensate won't work in this situation because of background colour issues. This is starting to give me a cramp. I didn't realize how much stress is involved with trying to wrap your head around every nuance of css, browser differences, accessibility, usability, appearance, and code efficiency all at the same time. Talk about overwhelming. I'm not going to revert to using tables and I don't know why. =] rollandburn wrote: I wonder if someone could slap me with some knowledge and tell if there is a way to keep a table from squirting Eww... please use the word overflow, as that's the CSS term for it and way less gross than the word squirt. I shiver just thinking about it... :-) outside its containing div when the browser window is resized smaller. Or, How do you get a div to only shrink to the size of its contents (upon window resize) and not further? Set it to display: table-cell, which makes it act like a table cell in that it will expand to fit its contents. IE doesn't understand this, but IE expands to fit anyway (not sure about IE7, though, which still will not support the table display values). You can also simulate expanding to fit by messing with negative margins. I've written a few articles on this over at CMX: http://www.communitymx.com/abstract.cfm?cid=B0029 Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ 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] Table squirting out of DIV
Hi everyone, thank-you Zoe for the suggestion to use display: table- cell to sort out my squir..ahem, overflow problems. Unfortunately this nullifies the margins I have applied to the div that are necessary for layout. Applying padding to compensate won't work in this situation because of background colour issues. This is starting to give me a cramp. I didn't realize how much stress is involved with trying to wrap your head around every nuance of css, browser differences, accessibility, usability, appearance, and code efficiency all at the same time. Talk about overwhelming. I'm not going to revert to using tables and I don't know why. =] rollandburn wrote: I wonder if someone could slap me with some knowledge and tell if there is a way to keep a table from squirting Eww... please use the word overflow, as that's the CSS term for it and way less gross than the word squirt. I shiver just thinking about it... :-) outside its containing div when the browser window is resized smaller. Or, How do you get a div to only shrink to the size of its contents (upon window resize) and not further? Set it to display: table-cell, which makes it act like a table cell in that it will expand to fit its contents. IE doesn't understand this, but IE expands to fit anyway (not sure about IE7, though, which still will not support the table display values). You can also simulate expanding to fit by messing with negative margins. I've written a few articles on this over at CMX: http://www.communitymx.com/abstract.cfm?cid=B0029 Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ 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] Table squirting out of DIV
Hi everyone, I wonder if someone could slap me with some knowledge and tell if there is a way to keep a table from squirting outside its containing div when the browser window is resized smaller. Or, How do you get a div to only shrink to the size of its contents (upon window resize) and not further? - |containing div at 95% page width | | | | | | | variable width table | | | squirting out | | | | | || || - Thanks again! __ 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] Francky's Corners and accessible tabs
Hi all, after great help and suggestions from quite a few of the members here I have come to another block in my css training. After successfully implementing francky's rounded corners and accessible tabs separately, I find that I am having a problem getting the tabs to sit on top of the rounded corner div. The tabs are sliding down, overlapping the div instead of sitting on top. Teh following link illlustrates this. http://www.rollandburn.com/test.html again, thanks for un-stumping me! hehe __ 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] floated div problem in IE
Hi all, I wonder if someone could take a peek at http://ap.projectstep.com/atlay/location_and_access/ The side menu on IE is getting shoved to the right but it looks fine on Firefox. I am stumped and would appreciate any help. 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/
[css-d] OT:Heading tags / Title content
Hi all, this question isn't quite css but it is in the same realm. What is the ideal 'proper' content for the 'H' tags and title tags? or another way to ask.What is the best way to cascade the importance of the heading content to coincide with the importance level placed on the various tags? In my example below, the h1 has image replacement so that text can't be seen, whereas h2,h3,h4 can be seen in the body of the page. !DOCTYPE .. html head meta. titleCompany Name - Atlay Cooperation Agreement Area Projects - Permit Areas - Sarsuke/Zelande VMS/Gold/title /head body div id=header h1 id=homeImageCompany Name - Atlay Cooperation Agreement Area Projects - Permit Areas - Sarsuke/Zelande VMS/Gold/h1 /div div id=content h2Atlay Cooperation Agreement Area Projects/h2 h3Permit Areas/h3 h4Sarsuke/Zelande VMS/Gold Area/h4 p.../p /div /body Sofor example, would the title simply be Sarsuke/Zelande VMS/ Gold instead of the whole string from top to bottom like I have it, or would the h1 simply be Company Name ? Thanks for explaining it to a DIY'er __ 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] Sprites and Image Replacement
Franckyit works perfectly. You went through enough trouble to
help me out that I have to say (Thank-you * 1000)! After reading
your reworking of the css i now completely understand how to do this
the proper way. And you are correct, the offsetting is much easier
with the graphics in a horizontal manner. Again, thanks so much!
On 23-Jun-06, at 8:27 AM, francky wrote:
rollandburn wrote:
Hi all, I wonder if a guru could help me out with my (attempted)
implementation of sprites and image replacement. Below is the
css and html which works fine in firefox and internet explorer
(as far as I can tell) and an example can be seen at http://
www.rollandburn.com
I get the feeling I'm missing something important with the
sprites because there should be no need to keep repeating...
background: url(linkGrid_sectionTabs.gif) -240px -15px no-repeat;
...in the css for each of the tabs. I thought I could simply
put that under the #tabNav li {} and for each of the tabs all I
would have to set is the positioning but unfortunately the way I
have it below is the only way I could get it to work.
Arg!
I know my IR technique probably leaves a lot to be desired. =[
Thanks for any suggestions or advice to improve. =]
[...]
Hi Rollandburn,
If you use an image with the tabs horizontally, everything is more
simple to see. First put the image as a general background (all
grey), then lift the one you need when hovering. Same way (lifting
1 step more) for the current status of a tab. The positioning of
the tabs can be done with floating left for each tab.
Compare: test page here http://home.tiscali.nl/developerscorner/
css-discuss/test-rolland.htm.
:-)
Greetings,
francky
btw: Consider a larger font size for the tab images (pretty small
at large resolutions...), or (better) use text with a tab-bg of
only the sprite; then the visitor can scale the font size, if
wanted/needed. Accessible for everybody!
__
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] Sprites and Image Replacement
Hi all, I wonder if a guru could help me out with my (attempted)
implementation of sprites and image replacement. Below is the css
and html which works fine in firefox and internet explorer (as far as
I can tell) and an example can be seen at http://www.rollandburn.com
I get the feeling I'm missing something important with the sprites
because there should be no need to keep repeating...
background: url(linkGrid_sectionTabs.gif) -240px -15px no-repeat;
...in the css for each of the tabs. I thought I could simply put
that under the #tabNav li {} and for each of the tabs all I would
have to set is the positioning but unfortunately the way I have it
below is the only way I could get it to work.
Arg!
I know my IR technique probably leaves a lot to be desired. =[
Thanks for any suggestions or advice to improve. =]
HTML_
ul id=tabNav
li id=tab_dashboarda href=/ title=DashboardDashboard/a/li
li id=tab_addMorta href=/ title=Add MortgageAdd Mortgage/
a/li
li id=tab_searcha href=/ title=SearchSearch/a/li
li id=tab_reportsa href=/ title=ReportsReports/a/li
/ul
CSS__
#tabNav {
margin: 0;
padding: 0;
position: relative;
}
#tabNav li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
width: 120px;
height: 15px;
text-indent: -5000px;
font-size: 1px;
}
#tabNav li, #tabNav a {
height: 15px;
display: block;
}
#tab_dashboard { background: url(linkGrid_sectionTabs.gif) -240px
-30px no-repeat; left: 0; }
#tab_dashboard a:hover { background: url(linkGrid_sectionTabs.gif)
-120px -30px no-repeat; }
#tab_addMort { background: url(linkGrid_sectionTabs.gif) -240px 0 no-
repeat; left: 120px; }
#tab_addMort a:hover { background: url(linkGrid_sectionTabs.gif)
-120px 0px no-repeat; }
#tab_search { background: url(linkGrid_sectionTabs.gif) -240px -15px
no-repeat; left: 240px; }
#tab_search a:hover { background: url(linkGrid_sectionTabs.gif)
-120px -15px no-repeat; }
#tab_reports { background: url(linkGrid_sectionTabs.gif) -240px -45px
no-repeat; left: 360px; }
#tab_reports a:hover { background: url(linkGrid_sectionTabs.gif)
-120px -45px no-repeat; }
__
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/
