[css-d] windows display problems with drop downs
http://newsite.herb-pharm.com/shopping/shopping/19/online-store.html http://newsite.herb-pharm.com/products/products/18/our-products.html - there seems to be a display problem with the main menu with firefox on windows, but not ie (at least the version i am able to see). the menu items are not nearly spread out enough. i cannot figure out what it is. and i don't know how to fix it other than brute forcing stuff in php and css - not a trivial task. there is no equivalent to [if IE] for firefox, so i'd have to sniff the browser in php and modify the css accordingly? __ 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] page marker problem
Hi,
Sample is at http://www.egretdesign.com/marker/ballroom.html
I'm trying to use css image rollovers and javascript to have the image
display in the rollover state when I'm on that page. The css rollover works
(see image links) and The JavaScript page marker works as seen in the html
links using "#nav li.current a {color:#00CCFF;}" but I don't know what to
put in "#nav li.current a" to bring up the rollover image. Since the nav
will be in an include file I can't bring in specific images, it needs to be
the rollover image for whichever link it's on. Would greatly appreciate any
help on this.
Thanks in advance,
Liz
__
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] seeking browser test by Mac browser
*Self taught web designer (who uses Windows) seeks help for browser testing site on a Mac. * My site is www.snakegullycup.com.au . I have only just started designing websites and i generally use IE . I have checked site with firefox and it site works too, but recently checked on a Mac (not sure which browser) and what should be a horizontal nav across the header seems to break. What am i doing wrong? Thanks liz __ 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] firefox display problems - need urgent help
> Do you need the display: table on the content division? In one of the > times that the problem manifested itself, I removed display:table using > Firebug from the content division and it corrected itself. Mind you, > Firebug redraws the screen when you change the CSS, so I may be way off > base here. However, I didn't see any difference in the layout with > display:table removed, so I wonder if you need it. Certainly IE doesn't > understand that anyway. > > Just a thought. > > Lori > Lori, Thank you so much for your suggestion, that fixed it! I had display table on both the content and page styles. When I took it off of both it fixed the problem. I never would have thought of that. Styling with CSS is still mostly a mystery to me but thanks to the help of the list I'm slowly figuring it out. Thank you others who helped also -- I will also take a closer look at my font sizes. Liz __ 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] firefox display problems - need urgent help
>> > Do you need the display: table on the content division? In one of the > times that the problem manifested itself, I removed display:table using > Firebug from the content division and it corrected itself. Mind you, > Firebug redraws the screen when you change the CSS, so I may be way off > base here. However, I didn't see any difference in the layout with > display:table removed, so I wonder if you need it. Certainly IE doesn't > understand that anyway. > > Just a thought. > > Lori > I think I needed the display table for either the right column to stay put or maybe it was the background image -- I forget now but will experiment with not using it. Thanks, Liz __ 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] firefox display problems - need urgent help
> I'm running WinXP/SP2 and FF2.0.0.3 at 1024 x 768 on a 17" monitor. > > Similar to what Lori said, there is a lag when the left column draws, but > otherwise, everything stays put...until one bump up in font size causes the > last nav item to drop down one line, which shoves the whole content off the > right side of the page. This even happens if I increase the view port to > 1280 x 1024. Reducing the font size does not break the layout. > > The drop down menu rendering seems a tag slow. Also, the Publication links > open .pdf's without warning and both the Publication and Links links > unexpectedly open a new window. IMO (only) the former is simply annoying, > the latter is bad behavior. > > Regardless, my initial impression of the site when first opened is that it > is visually pleasing and well laid out. > > Cheers, > > Peter > www.fatpawdesign.com Odd, I just downloaded the latest for both browsers and still have same problem on all but home page on both Mac and PC. Strange that this doesn't happen on my test site http://www.liztestsite.com/indexTest.shtml. If it had I would have fixed it before making it live. I wonder if there is something different about the servers. Re the font sizes -- on the left, they are all the same except for the dropdowns which are smaller. Maybe the percentages are not good. I will look in there more closely to see if there is something I messed up with all my experimenting. I will also experiment with the font sizes and Firebug as suggested. Thank you all for your help. Liz Liz __ 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] firefox display problems - need urgent help
Please try clicking around from page to page within the site and particularly go to the calendar page and the donation page. It seems to happen more there. On 5/15/07 4:35 PM, "Lori Lay" <[EMAIL PROTECTED]> wrote: > Liz wrote: >> On this site http://www.whsfoundation.org/ when I click around within the >> site in Firefox often the right and left column are empty because the >> content drops to the bottom. This didn't happen on my demo sever >> http://www.liztestsite.com/indexTest.shtml. Any ideas of what I can do? >> >> Thanks, >> >> Liz >> >> > I couldn't find any problems with FF 2.0.0.3 on Mac. There is a > definite re-draw of the left navigation contents, but they stay put. > I'm running at 1920x1200 - I don't know if that has anything to do with > it or not. Even seems to work with JavaScript disabled. > > Lori > __ 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] firefox display problems - need urgent help
It is worse on the Mac Firefox but on the pc it happens on http://www.whsfoundation.org/calendar.shtml and http://www.whsfoundation.org/donate.shtml Try clicking back and forth between a few links on the site. It happens more often after coming from another page in the site. My PC & Mac Firefox version is 1.5.0.11. When I check for updates it says there are no new ones. Liz On 5/15/07 4:32 PM, "Brian Crescimanno" <[EMAIL PROTECTED]> wrote: > Firefox 2.0.3 here; I don't see the problem you're referring to. Can > you point to a specific URL URL where you're seeing the 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] firefox display problems - need urgent help
On this site http://www.whsfoundation.org/ when I click around within the site in Firefox often the right and left column are empty because the content drops to the bottom. This didn't happen on my demo sever http://www.liztestsite.com/indexTest.shtml. Any ideas of what I can do? Thanks, Liz __ 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] PayPal form changing page layout
Hello, On this page http://www.liztestsite.com/test.shtml in Firefox only, the PayPal forms (the only thing in the center column) cause the content in the left and right column to drop to the bottom of the window. It may not happen when you first go to the page but if you copy the URL, click on another page or 2 in the site and then paste the address back in you should see it. When it is refreshed the content goes to where it should but I do not want to make the page refresh each time. It seems like the form is making the center column too wide. Would appreciate any help. Thanks, Liz __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] centering
Thank you! I had tried that on the innerContainer div which I thought of as the container for the the content but it works on the content. Thanks! Regards, Liz On 1/19/07 9:20 PM, "Donna Jones" <[EMAIL PROTECTED]> wrote: > Liz, does putting margin: 0 auto; on the content work, seemed to from > here. > > best > donna > > > Liz wrote: >> Hello, >> >> Here is my sample http://www.egretdesign.com/footer/footer.html >> >> I am trying to center the yellow content area horizontally without losing my >> footer background image that stays on the bottom of the browser window or my >> background header color. Nothing I've tried works. >> >> Thank you in advance, >> >> Liz >> >> >> >> __ >> 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/
[css-d] centering
Hello, Here is my sample http://www.egretdesign.com/footer/footer.html I am trying to center the yellow content area horizontally without losing my footer background image that stays on the bottom of the browser window or my background header color. Nothing I've tried works. Thank you in advance, Liz __ 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] ie spacing on list
On 1/5/07 2:04 AM, "Gunlaug Sørtun" <[EMAIL PROTECTED]> wrote: > Liz wrote: > >> http://www.liztestsitem.com/nav/index.html > >> It's not lining up correctly. Did I put something in the wrong order? >> I'm still fairly new to css layout. > > CSS is correct, but the background-images you use are not. They should > be cropped (in a photo-program) so the blank areas on top and left side > are no longer there. Otherwise it'll become visually "skewed". > >> I'm wondering if the background image approach will work though. >> Roger Roelofs gave me a solution that centered the arrow but on a 2 >> line list the arrow goes between the lines. I would like it to look >> work like a real bullet and center to the first line. Is this >> possible with a background image? > > Yes, but not with any image size. > > You want it somewhat like this... > <http://www.gunlaug.no/tos/alien/test_07_1110.html> > > Give that page a 300% font resizing in Firefox, and the arrows will > still line up as you want. It centers quite well with the first line, > regardless of font size, number of lines and other variables. > > Positioning with 'em' from the top makes position adjust with font size, > and the line-up will be quite good and stable with a small background image. > > I have cropped the two "arrow" images to make them as small as they can > be (and turned them into 8 bits png for my convenience). That's how I > described it in my previous response. > > Hope that makes it all a bit clearer. > > regards > Georg Thank you so much, your sample works perfectly. The reson it did not work when I tried it before was not for lack of cropping the images which I had done, the problem was I was linking to the root image directory which had the uncropped ones by having a slash before images. I forgot I was not linking to the images direcory in my same folder. thanks you so much for your help and patience. Regards, Liz __ 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] ie spacing on list
On 1/4/07 3:26 PM, "Ian Young" <[EMAIL PROTECTED]> wrote:
> Hello Liz
>
>>
>> 1) have the space between the list items be the same in IE as it is in FF
>> and Safari.
>
> Try float:left instead display:block
>
> #navcontainer li { margin: 6px 0 6px; }
>
> #navcontainer a
> {
> float:left
> margin: 6px 0 6px;
> padding: 5px 14px 5px 24px;
> background-image: url(/images/arrowLn.gif);
> border-bottom: 1px solid #3f61a2;
> background-repeat: no-repeat;
>
> }
>
> Note the change to the rule in navcontainer li
>>
>
>
> Cheers
>
> Ian
> --
> No virus found in this outgoing message.
> Checked by AVG Free Edition.
> Version: 7.5.432 / Virus Database: 268.16.4/615 - Release Date: 03/01/2007
> 13:34
>
>
Thank you for your help. That works well for a 1 line list item but when 2
lines it wraps all the way to the left.
http://www.liztestsitem.com/nav/index3.html
Regards,
Liz
__
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] ie spacing on list
On 1/4/07 3:47 PM, "Roger Roelofs" <[EMAIL PROTECTED]> wrote:
> Lic,
>
> On Jan 4, 2007, at 5:59 PM, Liz wrote:
>
>> Is there a way to do the following with
>> http://www.liztestsitem.com/nav/index.html
>>
>> 1) have the space between the list items be the same in IE as it is
>> in FF
>> and Safari.
>>
>> 2) the arrow is a background image. I have to keep changing the
>> canvas size
>> of the arrow image so the arrow lines up where I want it to when I
>> change
>> the size of the list font. Is there a better way of doing this? I
>> tried
>> using an arrow as the list bullet but it didn¹t show up when I also
>> had the
>> border for the line.
>
> for 2), using background-position: center left; will keep the
> background image centered inside the a element. As for 1), I can't
> test on ie, but I'd start by zeroing out the margin and padding for
> both the ul and li in question.
>
> I ended up with something like this (all other styles left alone).
> Trimming out the extra background on the arrow will require some
> tweaking of the css, but it will be simpler in the end.
>
> #navcontainer li {
> margin: 6px 0;
> border-bottom: 1px solid #3f61a2;
> padding: 0 0 5px 0;
> }
>
> #navcontainer li a {
> display: block;
> padding: 5px 14px 0 24px;
> background-image: url(/images/arrowLn.gif);
> background-repeat: no-repeat;
> background-position: center left;
> }
>
Thank you for your help.
Your solution works very well for 1 lines lists
http://www.liztestsitem.com/nav/index2.html but when there are 2 lines it
centers between them which doesn't act the way a real bullet should since it
is a background image and not a bullet. Do you know of a way to make it work
with a border and a real bullet?
Regards,
Liz
__
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] ie spacing on list
On 1/4/07 5:10 PM, "Gunlaug Sørtun" <[EMAIL PROTECTED]> wrote:
> Liz wrote:
>
>> http://www.liztestsitem.com/nav/index.html
>>
>> 1) have the space between the list items be the same in IE as it is
>> in FF and Safari.
>
> IE needs its 'hasLayout'[1] trigger.
> Adding...
> #navcontainer a {height: 1%;}
> ...will do.
>
>> 2) the arrow is a background image. I have to keep changing the
>> canvas size of the arrow image so the arrow lines up where I want it
>> to when I change the size of the list font. Is there a better way of
>> doing this? I tried using an arrow as the list bullet but it didn¹t
>> show up when I also had the border for the line.
>
> Background-images are easiest to line up reliable across browser-land,
> so just keep it there - with minor changes.
>
> 1: crop the image canvas so it's only as large as the arrow. That should
> be 7 x 8 px image-size.
>
> 2: adjust its position and make it font size dependent, by adding
> something like...
> #navcontainer a {background-position: 10px .7em;}
>
> That will make it line up pretty well over a wide range of font resizing
> in all browsers.
>
> regards
> Georg
>
> [1]http://www.satzansatz.de/cssd/onhavinglayout.html
Thank you for your help.
Your solution helped with 1) but not 2) see
http://www.liztestsitem.com/nav/index.html It's not lining up correctly. Did
I put something in the wrong order? I'm still fairly new to css layout.
I'm wondering if the background image approach will work though. Roger
Roelofs gave me a solution that centered the arrow but on a 2 line list the
arrow goes between the lines. I would like it to look work like a real
bullet and center to the first line. Is this possible with a background
image?
Regards,
Liz
__
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 spacing on list
Hello, I sent this a few days ago but didn¹t see it on the list so if it is a duplicate I appologize. Is there a way to do the following with http://www.liztestsitem.com/nav/index.html 1) have the space between the list items be the same in IE as it is in FF and Safari. 2) the arrow is a background image. I have to keep changing the canvas size of the arrow image so the arrow lines up where I want it to when I change the size of the list font. Is there a better way of doing this? I tried using an arrow as the list bullet but it didn¹t show up when I also had the border for the line. Thanks, Liz __ 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] background image not showing up
On 9/26/06 4:19 AM, "Roberto Gorjão" <[EMAIL PROTECTED]> wrote:
> Olá Liz,
>
> You need a div inside the content div (by the way, you have two of this
> one) that pushes its height. My suggestion is:
>
> 1- edit the markup so the footer div gets inside the content but after
> the the cols divs...
>
>
> Lorem ipsum ...
> Lorem ipsum...
> footer
>
>
> 2- edit the footer style rules as follows:
>
> #footer {
> *clear: both;*
> text-align: center;
> *background-color:white;*
> }
>
> That's it!
>
> HTH!
>
> Roberto
>
> --
>
> Liz wrote:
>> Hello,
>>
>> On this page http://www.liztestsitem.com/line/test.html the "content" div
>> that contains the left and right column has a background image that should
>> make a vertical line down the center but it is not showing up in Safari or
>> Firefox. I need help in making it show. I thought that because the columns
>> were within the content div it would give it the height to show, but it
>> doesn't recognize the columns as part of its content.
>>
>>
That fixed the problem, perfectly, and without having to change much!
http://www.liztestsitem.com/line/test.html (refresh)
Thank you so much!
Liz
__
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 image not showing up
On 9/26/06 4:18 AM, "Roger Roelofs" <[EMAIL PROTECTED]> wrote:
> Liz,
>
> On Sep 26, 2006, at 5:06 AM, Liz wrote:
>
>> Hello,
>>
>> On this page http://www.liztestsitem.com/line/test.html the
>> "content" div
>> that contains the left and right column has a background image that
>> should
>> make a vertical line down the center but it is not showing up in
>> Safari or
>> Firefox. I need help in making it show. I thought that because the
>> columns
>> were within the content div it would give it the height to show,
>> but it
>> doesn't recognize the columns as part of its content.
>
> What is tripping you up is that both the left and right columns are
> floated. This takes both of the out of the normal document 'flow'
> which leaves #content without any. There are many ways to solve
> this, but the one you choose may depend on what else is happening on
> the page. Here are some choices:
>
> #content { float: left; } /* floating the content makes it expand to
> hold the floated children */
>
> The 'clearfix' method (which you can google for)
>
> Adding a clearing element at the bottom of #content, Zoe has a page
> about that as I recall. Again, google is your friend.
>
> One of these solutions should get you where you want to go. Also,
> See this article by Eric Meyer to understand float containment in
> general. <http://www.complexspiral.com/publications/containing-floats/>
>
> Roger,
Thank you for your reply, I will experiment with these methods.
Liz
__
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 image not showing up
On 9/26/06 3:47 AM, "[EMAIL PROTECTED]" <[EMAIL PROTECTED]> wrote:
> how about a div with a line? You can set the height to whatever you want.
>
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
> http://www.w3.org/1999/xhtml";>
>
>
> Untitled Document
>
> <!--
> body {
> margin: 0px;
> padding: 0px;
> }
> #container {
> width: 761px;
> margin: 0 auto;
> position: relative;;
> }
>
> #masthead
> {
> height: 99px;
> background-color: #afb6c6;
> padding: 0px;
> border-bottom-width: 6px;
> border-bottom-style: solid;
> border-bottom-color: #cc;
>
> }
> #title {
> text-align: center;
> padding-top: 5px;
> padding-bottom: 3px;
> }
>
> #content {
> width: 761px;
> position: relative;
> background-image: url(newsBkg.gif);
> background-repeat: repeat-y;
> }
> #leftCol {
> float: left;
> width: 365px;
> }
> #rightCol {
> float: right;
> width: 365px;
> }
> #footer {
> clear: both;
> text-align: center;
> }
>
> #linebox {
> border-left: 1px solid black;
> width:1px;
> float:left;
> height:200px;
> margin-left:13px;
>
> }
>
>
> -->
>
>
>
>
>
>
> Title
>
>
> Lorem ipsum dolor sit amet, consectetuer
> adipiscing elit. Duis ligula lorem, consequat eget, tristique nec,
> auctor
> quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean
> viverra
> malesuada libero.
>
>
>
> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula
> lorem,
> consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce
> aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac
> quam.
> Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel
> accumsan
> aliquam, tellus dui fringilla quam, in condimentum augue lorem non
> tellus.
> Pellentesque id arcu non sem placerat iaculis. Curabitur
>
>
>
> footer
>
>
>
>
>
>
>
Thanks for your reply but the problem with that is I want the line to always
be the height of the text which will change from page to page.
Liz
__
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 image not showing up
Hello, On this page http://www.liztestsitem.com/line/test.html the "content" div that contains the left and right column has a background image that should make a vertical line down the center but it is not showing up in Safari or Firefox. I need help in making it show. I thought that because the columns were within the content div it would give it the height to show, but it doesn't recognize the columns as part of its content. This is what the background image looks like when I take out the columns and put text directly in the content div http://www.liztestsitem.com/line/test2.html I don't want to put the line as a border on one of the columns because the length of text will vary between columns on different pages and it might end up on the shorter one. Would appreciate any help. Thanks, Liz __ 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 spacing problems on nav list
On 8/16/06 2:30 AM, "francky" <[EMAIL PROTECTED]> wrote: > Liz wrote: > >> [...] >> Actually it worked well until I tried a mouse-over. >> Then it collapses in a wierd way on IE on the PC. >> Sample is still at >> http://www.liztestsite.com/kh/sample.html >> >> Do I need to put that width other places as well? >> >> > Hi Liz, > Try to break the fish hooks of the list-items in the html: > testpage > <http://home.tiscali.nl/developerscorner/css-discuss/test-listsample.htm>. > Then the fishes aren't swimming away in IE :-) > > Greetings, > francky > I'm not able to open your test page but I do have have a fix now from Mari that works well so I'm going to go with that. Thank you to everyone who offered help. Regards, Liz __ 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 spacing problems on nav list
On 8/16/06 1:54 AM, "Mari Sysimies" <[EMAIL PROTECTED]> wrote:
>>
>> Actually it worked well until I tried a mouse-over. Then it collapses in
>> a
>> wierd way on IE on the PC. Sample is still at
>> http://www.liztestsite.com/kh/sample.html Do I need to put that width
>> other
>> places as well?
>
>
> Hi Liz
>
> Sorry if I'm late, and You have got solution alreary. (I read list in
> digest-mode.)
> You can try something like this:
>
> #navcontainer li
> {
> margin-bottom: 8px;
> padding-top: 2px;
> padding-bottom: 2px;
> padding-left: 5px;
> background-color: #2b6a59;
>
> }
>
> #navcontainer a
> {
> display: block;
> width: 100%;
> }
>
> Mari - not an expert
Thank you Mari, that fixed it! The previous fix was almost there but not
quite, had problems with the rollovers.
his works well and the padding where you put it keeps the list at the
correct width. Where I originally put it the width increased with the
padding even though there was room for the text.
Thank you
Regards,
Liz
> __
> 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-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 spacing problems on nav list
On 8/15/06 11:13 PM, "David Laakso" <[EMAIL PROTECTED]> wrote:
> Liz wrote:
>>
>> I added margin-bottom: 8px; to "#navcontainer a" to get the space I want
>> between the background blocks. The space is the way I want it on Safari and
>> FireFox but way too spread out vertically on IE on the PC. How can I get
>> the space I want to work it least closely on all (modern) browsers?
>>
>> sample is http://www.liztestsite.com/kh/sample.html
>> Liz
> Liz,
> Try adding 100% width to the a for an ie haslayout trigger [1]:
> #navcontainer a { width: 100%; }
> [1] <http://www.satzansatz.de/cssd/onhavinglayout.html>
> Best,
> ~dL
> PS Don't for get to give your final page a background-color (I default
> to fuchsia in Opera to catch myself)
>
>
>
Actually it worked well until I tried a mouse-over. Then it collapses in a
wierd way on IE on the PC. Sample is still at
http://www.liztestsite.com/kh/sample.html Do I need to put that width other
places as well?
Regards,
Liz
__
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 spacing problems on nav list
That fixed it. Thank you!
Liz
On 8/15/06 11:13 PM, "David Laakso" <[EMAIL PROTECTED]> wrote:
> Liz wrote:
>>
>> I added margin-bottom: 8px; to "#navcontainer a" to get the space I want
>> between the background blocks. The space is the way I want it on Safari and
>> FireFox but way too spread out vertically on IE on the PC. How can I get
>> the space I want to work it least closely on all (modern) browsers?
>>
>> sample is http://www.liztestsite.com/kh/sample.html
>> Liz
> Liz,
> Try adding 100% width to the a for an ie haslayout trigger [1]:
> #navcontainer a { width: 100%; }
> [1] <http://www.satzansatz.de/cssd/onhavinglayout.html>
> Best,
> ~dL
> PS Don't for get to give your final page a background-color (I default
> to fuchsia in Opera to catch myself)
>
>
>
__
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] IE spacing problems on nav list
Hello, I'm trying to revise a list I got from Listamatic. There, the list has no space between the links. I added margin-bottom: 8px; to "#navcontainer a" to get the space I want between the background blocks. The space is the way I want it on Safari and FireFox but way too spread out vertically on IE on the PC. How can I get the space I want to work it least closely on all (modern) browsers? sample is http://www.liztestsite.com/kh/sample.html Thanks in advance, Liz __ 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] IE extra vertical space
Can anyone tell me how to get rid of the space between the left column and the bar with the "home" gif above it. It only shows up in IE. Sample is at http://www.liztestsitem.com/testsite/test.asp Thanks in advance, Liz __ 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] problem with header spacing
Thank you all so much for your help. It's fixed and the red border is a
great visual tool for when I don't know what's going on.
This list is a wonderful resource. Without it I'd probably give up and go
back to tables.
Regards,
Liz
On 7/23/06 9:18 PM, "francky" <[EMAIL PROTECTED]> wrote:
> Liz wrote:
>
>> [...]
>>
>>> h1, h2, h3, p {margin:0;padding:0;}
>>>
>>> I added the "p" element because it looked like you wanted the paragraph
>>> text to start immediately below the h3, and browsers have different
>>> default margins and padding for p as well as h*.
>>>
>>>
>> Thank you again for replying.
>>
>> Your code with the p worked perfectly until I wanted a paragraph break not
>> under a header. Just a normal one. I didn't get a double space. I tried
>> adding the paragraph space back in like I did the headers but ended up with
>> space again under the headers. I really am new to css so what might be
>> obvious to someone else is not to me such as how to add the space back in.
>>
>> The page with the new code is in the same place.
>> http://www.egretdesign.com/test.shtml
>>
>>
> Maybe:
> p {
> padding: 0 0 1em 0;
> border: 1px dashed red; /* tmp */
> }
> ===
> You used the 2 digit shorthand notation for the padding-properties:
> p {
> padding: 1em 0;
> }
> which means: set both padding-top /and/ padding-bottom to 1em, set both
> padding-right /and/ padding-left to 0.
>
> With the 4 digit notation you can set different values for the top
> padding and the bottom padding.
> The 4 digit shorthand notation for the padding-properties is always
> clockwise:
> padding-top (= 0),
> padding-right (=0),
> padding-bottom (=1em),
> padding-left (=0).
>
> Now the distance to the H1 or H2 or H3 above is always 0, and the space
> between two paragraphs consists of the 1em margin-bottom of the first one.
>
> A temp border line or background color can be helpful to see where the
> paddings (and margins) of an element are starting and ending. Revealing
> the browser secrets of padding/margin computing! :-)
>
> 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/
Thank you all so much for your help. It's fixed and the red border is a
great visual tool for when I don't know what's going on.
This list is a wonderful resource. Without it I'd probably give up and go
back to tables.
Regards,
Liz
>
__
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] problem with header spacing
On 7/23/06 3:34 PM, "Steve Clason" <[EMAIL PROTECTED]> wrote:
> Liz wrote:
>
>> Sorry if this is a duplicate, I don't think it got posted. I put the code
>> in along with my color settings but I lost my color and there is more space
>> than before and the h1 came out huge. I'm sure I must have put in something
>> that is interfering but I don't know what.
>>
>> updated sample page is the same http://www.egretdesign.com/test.shtml
>>
>> Can you tell me what I did wrong.
>
> Sorry, I had a fingerpoken error. Try this (notice the curly braces
> instead of parentheses):
>
> h1, h2, h3, p {margin:0;padding:0;}
>
> I added the "p" element because it looked like you wanted the paragraph
> text to start immediately below the h3, and browsers have different
> default margins and padding for p as well as h*.
>
> I apologize for leading you astray.
>
> --
> Steve Clason
> Web Design & Development
> Boulder, Colorado, USA
> www.topdogstrategy.com
> (303)818-8590
>
> __
> 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/
>
Thank you again for replying.
Your code with the p worked perfectly until I wanted a paragraph break not
under a header. Just a normal one. I didn't get a double space. I tried
adding the paragraph space back in like I did the headers but ended up with
space again under the headers. I really am new to css so what might be
obvious to someone else is not to me such as how to add the space back in.
The page with the new code is in the same place.
I have to leave for an appointment but will check for your reply tonight.
Again, thank you for helping.
Regards,
Liz
__
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] problem with header spacing
On 7/23/06 2:33 PM, "Steve Clason" <[EMAIL PROTECTED]> wrote:
> Liz wrote:
>
>> Sorry for such a novice question but I am still new at css layout and very
>> new at using percents for fonts. I'm having trouble creating less space
>> above and below my H1 and H2 tags and I want no space under my H3. I don't
>> know the best way to do this.
>>
>> I have tried various solutions that work in IE but not other browsers and
>> vice-versa, but nothing that gives consistent results in all.
>>
>> Sample page http://www.egretdesign.com/test.shtml
>
> Hi Liz,
>
> One approach is to zero the margin and padding on all h* elements and
> then set them explicitly to what you want:
>
> h1, h2, h3 (margin:0;padding:0;)
> h1 {padding: 1em 0}
> h2 {padding: .5em 0}
> h3 {padding-top: .5em}
>
> for instance.
>
>
> --
> Steve Clason
> Web Design & Development
> Boulder, Colorado, USA
> www.topdogstrategy.com
> (303)818-8590
>
> __
> 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/
>
Thank you for your reply.
Sorry if this is a duplicate, I don't think it got posted. I put the code
in along with my color settings but I lost my color and there is more space
than before and the h1 came out huge. I'm sure I must have put in something
that is interfering but I don't know what.
updated sample page is the same http://www.egretdesign.com/test.shtml
Can you tell me what I did wrong.
Thanks,
Liz
__
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] problem with header spacing
Hello, Sorry for such a novice question but I am still new at css layout and very new at using percents for fonts. I'm having trouble creating less space above and below my H1 and H2 tags and I want no space under my H3. I don't know the best way to do this. I have tried various solutions that work in IE but not other browsers and vice-versa, but nothing that gives consistent results in all. Sample page http://www.egretdesign.com/test.shtml Thanks in advance, Liz __ 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] problem with 3 column layout
That worked. I never would have figured that out on my own. Thank you so
much!
Liz
On 7/21/06 7:28 PM, "Gunlaug Sørtun" <[EMAIL PROTECTED]> wrote:
> Liz wrote:
>> No 2 - was ok until I put a logo in it. The masthead is 99 px high
>> and so is the image. I wanted no border or space above it. When I
>> added the 1 px padding I got a large masthead space around it. When
>> I make the padding 0 there is no masthead padding around the logo but
>> there is the large white space above it. Any fix?
>
>> http://www.liztestsite.com/testsite/page1.html
>
> Zero out the default-margins on h1...
>
> h1 {margin: 0;}
>
> 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] problem with 3 column layout
On 7/21/06 3:00 PM, "Gunlaug Sørtun" <[EMAIL PROTECTED]> wrote: > Liz wrote: > >> link http://www.liztestsite.com/testsite/test2.html > >> Problem 1) >> >> my left nav include which is a flyout menu ends up being behind the >> content. It shows up but you can read the content through it. I >> tried giving it a high z index (10) hoping that would help but it >> didn't. I want the center column to come first for the search >> engines. > > Easiest solution, change 'z-index' on #middleColumn to 'z-index: 0;'. > >> Problem 2) > >> I don't want any border there (or on any part of this layout) but >> when I take out the 1 px border I end up getting a much larger than 1 >> px space above it. I'm too new to css to understand why this is >> happening. How can I get rid of the border without having this large >> space. > > You're experiencing the effect of 'collapsing margins'[1]. > > Try replacing top and bottom borders with 1px paddings, to avoid margins > on elements inside the containers from collapsing through their top and > bottom edges. > > regards > Georg > > [1]http://www.w3.org/TR/CSS21/box.html#collapsing-margins Hi Georg, Thank you for all your help. No 1 is completely solved. No 2 - was ok until I put a logo in it. The masthead is 99 px high and so is the image. I wanted no border or space above it. When I added the 1 px padding I got a large masthead space around it. When I make the padding 0 there is no masthead padding around the logo but there is the large white space above it. Any fix? Here is the current file http://www.liztestsite.com/testsite/page1.html Regards, Liz __ 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] problem with 3 column layout
On 7/21/06 3:03 PM, "francky" <[EMAIL PROTECTED]> wrote: > Liz wrote: > >> Hello, all, >> >> I hope someone can help. I posted this before but forgot to add the link. >> Then I posted again with the link but my email came back so I'm trying >> again. >> >> link http://www.liztestsite.com/testsite/test2.html >> >> I gave up on the "In Search of the Holy Grail" layout because the anchor >> links didn't work in FireFox. Now I'm trying the "Skidoo Too" 3 column >> layout. The anchor links work fine but I am having other problems. I >> hope someone can help. >> >> Problem 1) >> >> my left nav include which is a flyout menu ends up being behind the content. >> It shows up but you can read the content through it. I tried giving it a >> high z index (10) hoping that would help but it didn't. I want the center >> column to come first for the search engines. Although I had other problems >> with the "In Search of the Holy Grail" menu, and the center column was first >> there also, my flyout did work there. >> >> Problem 2) >> >> The #masthead has the following: >> >>border: solid 1px #fff; >>border-width: 1px 0; >> >> I don't want any border there (or on any part of this layout) but when I >> take out the 1 px border I end up getting a much larger than 1 px space >> above it. I'm too new to css to understand why this is happening. How can >> I get rid of the border without having this large space. >> >> Thanks, >> Liz >> > Hi Liz, > Here something about Problem 1: > You can give a z-index to the #leftColumn, and ... [1] testpage > <http://home.tiscali.nl/developerscorner/css-discuss/test-liztest2.html> > :-) > > Greetings, > francky > > [1] > Had to satisfy the html-validator first, some strange things happening > in the html... ;-) > http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.liztestsite.com%2 > Ftestsite%2Ftest2.html > <http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.liztestsite.com% > 2Ftestsite%2Ftest2.html> > Thank you for answering my request. I fixed it with Georg's solution. I will look into the valadation problem. There is JavaScript in the code. I don't know if I need it there or not since I copied the source code from the sample. Maybe it was supposed to go above the head tag. Regards, Liz > __ > 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-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] problem with 3 column layout
On 7/21/06 3:00 PM, "Gunlaug Sørtun" <[EMAIL PROTECTED]> wrote: > Liz wrote: > >> link http://www.liztestsite.com/testsite/test2.html > >> Problem 1) >> >> my left nav include which is a flyout menu ends up being behind the >> content. It shows up but you can read the content through it. I >> tried giving it a high z index (10) hoping that would help but it >> didn't. I want the center column to come first for the search >> engines. > > Easiest solution, change 'z-index' on #middleColumn to 'z-index: 0;'. > >> Problem 2) > >> I don't want any border there (or on any part of this layout) but >> when I take out the 1 px border I end up getting a much larger than 1 >> px space above it. I'm too new to css to understand why this is >> happening. How can I get rid of the border without having this large >> space. > > You're experiencing the effect of 'collapsing margins'[1]. > > Try replacing top and bottom borders with 1px paddings, to avoid margins > on elements inside the containers from collapsing through their top and > bottom edges. > > regards > Georg > > [1]http://www.w3.org/TR/CSS21/box.html#collapsing-margins That fixed both problems! Thanks so much Regards, Liz __ 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] problem with 3 column layout
Hello, all, I hope someone can help. I posted this before but forgot to add the link. Then I posted again with the link but my email came back so I'm trying again. link http://www.liztestsite.com/testsite/test2.html I gave up on the "In Search of the Holy Grail" layout because the anchor links didn't work in FireFox. Now I'm trying the "Skidoo Too" 3 column layout. The anchor links work fine but I am having other problems. I hope someone can help. Problem 1) my left nav include which is a flyout menu ends up being behind the content. It shows up but you can read the content through it. I tried giving it a high z index (10) hoping that would help but it didn't. I want the center column to come first for the search engines. Although I had other problems with the "In Search of the Holy Grail" menu, and the center column was first there also, my flyout did work there. Problem 2) The #masthead has the following: border: solid 1px #fff; border-width: 1px 0; I don't want any border there (or on any part of this layout) but when I take out the 1 px border I end up getting a much larger than 1 px space above it. I'm too new to css to understand why this is happening. How can I get rid of the border without having this large space. Thanks, Liz __ 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] 3 column layout problems
I gave up on the "In Search of the Holy Grail" layout because the anchor links didn't work in FireFox. Now I'm trying the "Skidoo Too" 3 column layout. The anchor links work fine but I and am having other problems. I hope someone can help. Problem 1) my left nav include which is a flyout menu ends up being behind the content. It shows up but you can read the content through it. I tried giving it a high z index (10) hoping that would help but it didn't. I want the center column to come first for the search engines. Although I had other problems with the "In Search of the Holy Grail" menu, and the center column was first there also, my flyout did work there. Problem 2) The #masthead has the following: border: solid 1px #fff; border-width: 1px 0; I don't want any border there (or on any part of this layout) but when I take out the 1 px border I end up getting a much larger than 1 px space above it. I'm too new to css to understand why this is happening. How can I get rid of the border without having this large space. Thanks, Liz __ 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] One True Layout problems (was Re: holy grail problems)
On 7/20/06 7:48 AM, "Alex Robinson" <[EMAIL PROTECTED]> wrote: >> Liz wrote: >>> ... It seems wierd that someone would make a design >>> that anchors don't work in since anchors are so widely used. ... > > It was an oversight missed by myself and the 20 or so people who > looked over the technique during its development - a situation > compounded by the at the time unremarked upon lack of consensus among > browsers on how to handle overflow:hidden and anchors. > > That's life I'm afraid. > > It was my bad that it took me an age to actually publish an update > about the problem... > > > Ingo wrote of another way of dealing with problem: >> But I admit this is not practical, and will break, too. > > > Actually I do have a solution of sorts for Mozilla/Firefox/Camino... > > http://www.fu2k.org/alex/css/cssjunk/anotherequalheight > > [Note that the url contains cssjunk - ie. it's a temporary likely to > disappear page so don't link to it - in fact please don't link to it > in any case for reasons I hope will be obvious] > > > The solution is based on using XBL attached via the -moz-binding property > > http://www.mozilla.org/projects/xbl/xbl.html > http://developer.mozilla.org/en/docs/CSS:-moz-binding > > Essentially the "equal height" stuff is overridden in Mozilla, an > explicit height applied to the containing element and the columns' > height is set to 100%. > > > Now it works as is, but I haven't had time to prettify or incorporate > back into the original article. Why? Well I'm still contemplating: > > 1. The validity of -moz-binding and how to deal with it > > 2. How to handle things if javascript is turned off since it wouldn't work > then > > 3. How to make things as generic as possible, so as to require as > little tweaking of the XBL file as possible (and whether some of the > moz class redefinitions should live in the XBL or in the CSS) > > 4. What to do about future versions of Safari which will begin > conforming to the now standard overflow: hidden anchor behaviour (as > reported by Philippe Wittenbergh). I think it should be possible > since Safari allows for absolute positioning of generated content. > > 5. Rationalising and shrinking the whole OTL code down since it's got > a "bit" over complicated and I'm sure some of it is there purely as > voodoo which really isn't necessary. > > > Anyone with any brilliant ideas, do let me know. Thank you for your reply. The one true layout is really a beautiful solution and I realize a lot of work was put into it. I can see how the anchor was overlooked. I showed you a scaled down page but I actually already built about 10 real pages before noticing. Regardless of the anchor fix, I think there are too many mac users that still use IE 5 (I know many that do) so I will find a solution that will work there also. I should find a web stat page that shows what what browsers are being used but I've heard that they are unreliable. I read in another post (answering someone else's question) a recommendaton of Skidoo http://webhost.bridgew.edu/etribou/layouts/skidoo_too/index.html I'll give that a try. Regards, Liz > __ > 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-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] holy grail problems
On 7/20/06 4:30 AM, "Ingo Chao" <[EMAIL PROTECTED]> wrote: > Liz wrote: > >> Thank you for the links. Here is my code. >> >> Please note (to the people who will request that I put my text in >> percentages) that the client specifically requested pixels >> >> http://www.liztestsite.com/testsite/test.html > > > This is using the padding-excess/negative-margin/overflow-clipping > method for equal height columns. The problem with the upscrolling and > therefore irretriveable content when clicking on in-page links is > described here > > http://positioniseverything.net/articles/onetruelayout/appendix/equalheightpro > blems > > Unfortunately there is no workaround. Its a design decision by browser > engineers. > > Ingo Thank you for your help. It seems wierd that someone would make a design that anchors don't work in since anchors are so widely used. I guess I'll have to use a different layout. Thanks again for your help. Liz __ 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] holy grail problems
On 7/20/06 3:23 AM, "Ingo Chao" <[EMAIL PROTECTED]> wrote: > Liz wrote: >> I started building a site with the "holy grail" 3 column layout >> http://www.alistapart.com/d/holygrail/example_2.html and noticed the >> following 2 problems: >> >> 1) On IE on the Mac the left column is not where it should be. > > The author does not support older browsers. > http://www.infocraft.com/articles/judgement_call_browser_support/ > >> >> 2) my anchors don't work correctly in FireFox -- I can click down into the >> page but when I click to go to the top of the page the content in my left >> column dissapears on the mac and the whole top of the page dissapears on the >> pc. > > Show us your code. > > The author has some updates on his site > http://www.infocraft.com/articles/holy_grail_on_a_list_apart/ > http://www.infocraft.com/articles/the_case_of_the_disappearing_column/ > > > Note that the complete title of the method is > "In Search of the Holy Grail" > > > Ingo > Thank you for the links. Here is my code. Please note (to the people who will request that I put my text in percentages) that the client specifically requested pixels http://www.liztestsite.com/testsite/test.html Liz __ 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] holy grail problems
I started building a site with the "holy grail" 3 column layout http://www.alistapart.com/d/holygrail/example_2.html and noticed the following 2 problems: 1) On IE on the Mac the left column is not where it should be. 2) my anchors don't work correctly in FireFox -- I can click down into the page but when I click to go to the top of the page the content in my left column dissapears on the mac and the whole top of the page dissapears on the pc. Are there any fixes for these problems? If not is there another sample somewhere with equal height columns and an expandable center? I know it's easy to do this in tables but I am in the process of trying to switch to css layouts. Liz __ 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] display problems on Mac
Thank you so much for your help. That took care of the problem. http://acd.liztestsite.com/prod_nortel.shtml Liz On 7/12/06 8:35 PM, "Al Sparber" <[EMAIL PROTECTED]> wrote: > From: "Liz" <[EMAIL PROTECTED]> > >> Thank you for your help Al and Philippe >> >> Al I tried what you said, it looks like the rectangle shows up but >> not the >> text. Also I lost the white color when I removed the height from >> the white >> bar even though I had the background color set. > > Here is an example page: > http://www.projectseven.com/testing/customers/liz/ > > Be careful because I saved it with Opera and the assets are a little > different in both name and location. > > Gave a width to your menu container (in ems). > Cleared your "white Bar" > Repositoned the vertical alignment of the menu and your page title > element using padding, relative positioning, and a top offset on the > title. > Set your current page mark color so it's visible :-) __ 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] display problems on Mac
Thank you for your help Al and Philippe Al I tried what you said, it looks like the rectangle shows up but not the text. Also I lost the white color when I removed the height from the white bar even though I had the background color set. then I changed the whitebar name and that didn't do anything. I do need to have white in that section and it seems it won't stay white without a height and when I change the name from having white in it it won't stay white even with height set! By the way the first orange menu item that isn't showing works fine on the home page http://acd.liztestsite.com/indexTest.shtml although now I have lost the white color there. Must run out now will check for responses later. Thank you so much for responding. Liz On 7/12/06 7:40 PM, "Al Sparber" <[EMAIL PROTECTED]> wrote: > From: "Liz" <[EMAIL PROTECTED]> > >> Can anyone tell me why the first orange top menu item "Products" >> disappears >> in Safari and FireFox on Mac but is ok in IE and FireFox on the PC? >> It was >> ok on Mac until I kept adding content to the page. The 2 column >> part of >> this page is from http://www.liztestsite.com/acd/css/2col.css and >> the main >> part is from http://www.liztestsite.com/acd/css/acd.css >> >> I'm still pretty new to css layout so please tell me in easy to >> understand >> language. >> >> http://www.liztestsite.com/acd/prod_nortel.html > > #loweLinks needs a width sufficient to fit all the root menu items. > Remove margin and used balanced top and bottom padding. > #whitebar: remove height > #pgTitle: remove margins > > You m,ight need to tweak a bit from there to get it to your liking. __ 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] display problems on Mac
Can anyone tell me why the first orange top menu item "Products" disappears in Safari and FireFox on Mac but is ok in IE and FireFox on the PC? It was ok on Mac until I kept adding content to the page. The 2 column part of this page is from http://www.liztestsite.com/acd/css/2col.css and the main part is from http://www.liztestsite.com/acd/css/acd.css I'm still pretty new to css layout so please tell me in easy to understand language. http://www.liztestsite.com/acd/prod_nortel.html Thanks, Liz __ 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 display problem
It worked, thank you so much!
Regards,
Liz
On 6/27/06 1:51 AM, "Gunlaug Sørtun" <[EMAIL PROTECTED]> wrote:
> Liz lizCSSlist wrote:
>> http://www.lizdesign.com/test/index.html
>
>> In IE on a PC, when I drag the window smaller by the bottom right
>> corner, the left nav moves towards the center. Any fix for this?
>> It's very likely that someone might try to resize the window this
>> way.
>
> Add...
> * html #center {overflow-x: hidden;}
> ...as that will make IE behave /a bit more/ like a real browser.
>
> 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] IE display problem
Hello, I hope someone can help me. My layout is at http://www.lizdesign.com/test/index.html I'm still struggling through the basics of css layout. I used the code from the equal-height columns of alistapart for my page with adjustments to sizes http://www.alistapart.com/d/holygrail/example_3.html The problem is that on my first page I need to use a large image (actually it will be 3 smaller images but I should be able to use a large one if necessary) In IE on a PC, when I drag the window smaller by the bottom right corner, the left nav moves towards the center. Any fix for this? It's very likely that someone might try to resize the window this way. Thanks in advance. Liz __ 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] Alignment Problems
Alignment problems http://www.tonepoemcollection.com/indexInclude.html http://www.tonepoemcollection.com/tp.css I'm a novice at css layout. I'm having problems aligning the logo with the top nav. The top nav is a list but I don't know if that makes a difference. It is also in an include but displays no differently from a non-include version I've tried. The problem is the alignment is different in every browser on every platform. If I fix it in one it looks bad in another. I've experimented with padding and margins. I'm trying to get the bottom of the nav list to line up with the bottom of the logo image. IE in Explorer is the closest. I know I could get what I want with absolute positioning or tables but I was trying to avoid that. Would it be better to do that or is there an easy fix? Thanks in advance, Liz __ 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 falling out of container with float left
I'm a beginner at CSS layout and just discovered this list. I hope someone can help. I'm doing a layout for an artist's website. I don't have much choice over the layout. The blue image represents the paintings. They will be different heights and widths. Also there will be text underneath the paintings that might vary in length. The problem is having the image stay in the container when I do it in CSS without using a fixed height for the container. Example 1 http://lizdesign.com/demosite/example1.html This shows how it should look. Here the image and side menu are in tables but the rest of the page is in CSS. There will also be text underneath of varying height. The image is nicely staying withing the container. Example 2 http://lizdesign.com/demosite/example2.html Here is my lame attempt to do the image and side menu with CSS. I have floated the image to the left in order to have the side nav be on the side but this has made the image fall out of the container. I cannot do a fixed height for the container because the size will change and there will be a varying amount of text under the image and nav. Why does the image fall out when I float it left and what would be the best way to do this layout? Thanks in advance. Liz __ 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 lines up correctly, nothing else does
Thank you, I fixed the redundant code. I also went over the page again, added some more parts, but still have the exact same problem. > http://www.ci.killeen.tx.us/Test/index.asp in IE7 looks just the way > it's supposed to look. > In FF the menu and all succeeding divs drop down below the logo. Liz Rainey Web Technology Specialist City of Killeen www.ci.killeen.tx.us -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] The first thing I would do is remove : style="display: inline" from the .html, for the div quickmenu-pos . On Jun 12, 2006, at 4:26 PM, Liz Rainey wrote: > Supporting files are: > > http://www.ci.killeen.tx.us/Test/css/style.css > http://www.ci.killeen.tx.us/Test/css/dropmenu.css (for only the "Quick > Menu") __ 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] IE lines up correctly, nothing else does
Greetings from a 3 months newbie to CSS. http://www.ci.killeen.tx.us/Test/index.asp in IE7 looks just the way it's supposed to look. In FF the menu and all succeeding divs drop down below the logo. I have spent a total of 14 hours on this issue, researching, trying various approaches - I don't see the forest for the trees any more. Supporting files are: http://www.ci.killeen.tx.us/Test/css/style.css http://www.ci.killeen.tx.us/Test/css/dropmenu.css (for only the "Quick Menu") Please ... help. Liz Rainey Web Technology Specialist City of Killeen www.ci.killeen.tx.us Phone 254.501.7820 __ 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] Problem with CSS Popup Menu "jumping" in I.E.
Thank you all for wonderful tips! Since signing up with this list I have learned more about CSS than in the last 6 months on my own! I am working on a new site for the city and almost have all problems tweaked, except this little doozy: sample page: http://www.ci.killeen.tx.us/menutest.asp The top right corner features a "Quick Menu". When I mouseover in Firefox, Opera, and Netscape, it works like a charm. In I.E. the mouseover causes the lines to skip/move - I don't know how to describe it. The entire menu with associated styles is in an SSI file, not part of the page code. When I embed the code in the page, it has the same problem. Any comments/tips would be much appreciated. Liz Rainey Web Technology Specialist City of Killeen www.ci.killeen.tx.us __ 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] Width of relatively positioned floats
I happened upon a strange thing by accident: by mistake I didn't set the width
of a relatively positioned float explicitly, but nothing bad happened... I've
tested it far and wide and I can't get it to break.
#navbuttons {position:relative; float:right; z-index:1}
And I looked all over the CSS specs and the only thing I could find was in
section 9.4.3 on Relative positioning.
It says
"A relatively positioned box establishes a new containing block for normal flow
children and positioned descendants."
Does that mean the width is not necessary for relatively positioned floats?
Or is there some other situation in which you don't have to specify the width
of a float (for non-replaced elements)?
thanks,
Liz
__
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/
