Re: [css-d] Content Not Floating in IE
Lisa, The problem is caused by the 98% width you have defined to the .text-sub paragraphs. As soon as you assign a width there, IE tries to make sure it fills that. Since you also have that side bar there, there is simply not enough room for a 98% width paragraph, so IE shoves it below. If you are using the width to create space, try using some padding or margin instead. Hope this helps. Take care, Tim Kadlec I'm not sure if the enclosing div should have "layout" or not in order to get the content to wrap properly around a floated div. In any event, I've tried numerous ways to set it up both ways and still IE shoves the content down below the float. Suggestions appreciated... http://www.bigsurarts.org/newsite/programs.html (or contribute.html, or contact.html, or artists.html...) CSS: http://www.bigsurarts.org/newsite/public/main.css Any other issues you notice also welcome (I do know the dropdown nav has issues and I'm resolving them now.) Thanks, Lisa _ You keep typing, we keep giving. Download Messenger and join the i’m Initiative now. http://im.live.com/messenger/im/home/?source=TAGLM __ 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] Two Columns layout
Ibrahim, Your best bet is to use a repeating background image on whatever container holds the leftDiv and rightDiv sections. Say that #container holds the divs, the rightDiv is 200px wide and you want the background color to be red. Just make a 200px wide red image, set it as the background image for container and position it accordingly. There is a nice article at: http://www.alistapart.com/articles/fauxcolumns/ Take care, Tim Kadlec > Message: 21 > Date: Mon, 8 Oct 2007 14:18:51 +0200 > From: "Ibrahim Y" <[EMAIL PROTECTED]> > Subject: [css-d] Two Columns layout > To: css-d@lists.css-discuss.org > Message-ID: > <[EMAIL PROTECTED]> > Content-Type: text/plain; charset=ISO-8859-1 > > Hello everybody, > > I have a CSS site, #leftDiv and #rightDiv > #leftDiv contains the menu and a flash banner, the #rightDiv contains the > data. > I want to color the #leftDiv to be at the same height with the #rightDiv , I > colored it using "bgcolor" but it apply it to the end of the content and I > can't apply a fixed height for #leftDiv because the #rightDiv data's changed > according to each page. > > I thought to use tag, but I don't feel it's the most suitable for me > ... I kept is as last resort . > > Thanks in advanced, > Ibrahim > _ Boo! Scare away worms, viruses and so much more! Try Windows Live OneCare! http://onecare.live.com/standard/en-us/purchase/trial.aspx?s_cid=wl_hotmailnews __ 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] IE 6, 7 Float problem, works in Firefox
Sam, You are understanding float correctly, unfortunately, IE doesn't. Since you have an explicit width of 700px on that inner div, IE thinks it needs about 850px (700 plus width of image) of width to show the image and division side by side. That's why when you take the width off, the image floats as it should. There is no explicit width on the div, so IE will let the width of the content change as needed. If you need it to behave in the smaller resolution, you need to either remove the inner div's width, or give it a percentage based width (say 70%), then IE will behave. Tim Kadlec Date: Wed, 30 May 2007 10:42:04 -0400 From: "Sam Carter" <[EMAIL PROTECTED]> Subject: [css-d] IE 6, 7 Float problem, works in Firefox To: Message-ID: <[EMAIL PROTECTED]> Content-Type: text/plain; charset="US-ASCII" Maybe I don't get float. Maybe this is a known bug... I've made a bare-bones sample page to show my misunderstanding... or the bug... http://tr ainthetrainers.net/home2.php> http://trainthetrainers.net/home2.php There's a float : right image. Yes... it's a beaver wearing a shirt. He's Canadian too. Start with a wide browser display of more than 1000px and shrink the width below 800px. The div#inner with the red border will clear the float. It seems like a bug to me, or am I misunderstanding float? Isn't the floated image supposed to glide right over the inner div schooching the inline-text out of the way? Interesting... If I remove the width : 700px on #inner, it behaves properly, not clearing the image. I'd like the inner div with the red border to not clear the image, but I'd like the inline text to clear the float as always. Seems to work properly in Firefox. But or not, is there a fix? Sam _ PC Magazines 2007 editors choice for best Web mailaward-winning Windows Live Hotmail. http://imagine-windowslive.com/hotmail/?locale=en-us&ocid=TXT_TAGHM_migration_HM_mini_pcmag_0507 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css-d Digest, Vol 52, Issue 45
Marc Van Den Dobbelsteen had a good article on how to do this over at A List Apart. Here's the link: http://alistapart.com/articles/switchymclayout Tim Kadlec Message: 24 Date: Mon, 26 Mar 2007 12:33:18 -0700 (PDT) From: n h <[EMAIL PROTECTED]> Subject: [css-d] screen area detection/alt style sheets To: css-d@lists.css-discuss.org Message-ID: <[EMAIL PROTECTED]> Content-Type: text/plain; charset=iso-8859-1 Hi, I'm new to the list and am looking for some (hopefully simple) javascript that detects the browser window width and then delivers one style sheet for window widths 900 px and smaller, and another style sheet for screens wider than 900 px (or whatever measurements are entered into the script). I searched through the archives and found a thread on this that had a link from "HTH-Mike" to a script that sounds like it is what I'm looking for, but the link doesn't work anymore: "I have a script that checks the window width, then serves up appropriate css for the monitor width. I design for 800x600, but have a backup css for 640x480. _ Interest Rates near 39yr lows! $430,000 Mortgage for $1,399/mo - Calculate new payment http://www.lowermybills.com/lre/index.jsp?sourceid=lmb-9632-18466&moid=7581 __ 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] Font Size
Depends on the font-size you have originally specified, and how many times you zoom in. It appears that it works something like this: 1 time zoomed in: 120% the original size (example: original: 10px; 1st zoom: 12px) 2 times: 125% the size after the last zoom (1st zoom 12px; 2nd zoom: 15px) 3 times: 133% the size after the last zoom (2nd zoom: 15px; 3rd zoom: about 20px) 4 times or greater: 150% the size after the last zoom If you want to be able to see the exact font size without calculating, get the web developer extension for Firefox. A must have for anyone designing using CSS. Tim Kadlec Message: 24 Date: Wed, 7 Mar 2007 12:58:50 - From: <[EMAIL PROTECTED]> Subject: [css-d] Font Size To: Message-ID: <[EMAIL PROTECTED]> Content-Type: text/plain; format=flowed; charset="iso-8859-1"; reply-type=original Hi, Can anyone please tell me what size is the font, when you hit "ctrl plus +" in FF. I've allowed for a 32px font size and it still pops out of the container DG) _ Mortgage rates as low as 4.625% - Refinance $150,000 loan for $579 a month. Intro*Terms https://www2.nextag.com/goto.jsp?product=10035&url=%2fst.jsp&tm=y&search=mortgage_text_links_88_h27f6&disc=y&vers=743&s=4056&p=5117 __ 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] Print Stylesheet Banner Switch
Pam,
Not sure exactly how you are going about doing this, but if it is a simple
print stylesheet, why not just change the style for the banner div.
Right now you have:
#newbanner {
background: url(/images/second_pbabannerB.jpg);
width: 570px;
}
#banner, #nav, #footer, .noprint {
display: none;
}
How about doing this instead:
#nav, #footer, .noprint {
display: none;
}
#banner{
background: url(/images/second_pbabannerB.jpg);
width: 570px;
}
Maybe I am not understanding exactly how you are going about this. If this
doesn't answer your question, how about posting a link to the site in
question.
Hope that helps,
Tim Kadlec
Hi all --
I'm trying to write a print stylesheet where the original page's
banner is replaced with a smaller (width wise - to fit on a page with
one-inch L&R margins) banner when the page is printed. So far I am
having no luck. I can easily remove the banner from being printed
but can't seem to make it switch out. Is there a way?
This is what I have so far -- where the orginal banner is set to not
print (which works) and the newbanner's id is put into a table cell
where I want it to print (which doesn't work).
#newbanner {
background: url(/images/second_pbabannerB.jpg);
width: 570px;
}
#banner, #nav, #footer, .noprint {
display: none;
}
--
Thanks,
Pam
Pamela Corey
IT Specialist
Public and Business Affairs Office
National Institute of Standards and Technology (NIST)
301-975-2170
_
Find a local pizza place, movie theater, and more
.then map the best route!
http://maps.live.com/?icid=hmtag1&FORM=MGAC01
__
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] Hiding Menu
Ross,
Your font size option should get the job done. Just add another style below
it like so:
ul.topmenu li.topmenuli ul{
font-size: 12px;
}
That should bring the font-size back for the bottom submenus.
Tim
Message: 19
Date: Mon, 19 Feb 2007 21:05:37 -
From: "Ross Hulford" <[EMAIL PROTECTED]>
Subject: [css-d] hiding menu text
To:
Message-ID: <[EMAIL PROTECTED]>
Content-Type: text/plain; charset="iso-8859-1"
I have the following menu and it works like this... topmenu list items are a
class and display a background image. all the other submenu items are text.
I want to be able to hide the text on the topmenuli items but I need it to
display when the css is switched off. Display:none hides everything and
font-size:0px casscades down the menu. Is there a way to target and hide the
text on the topmnenu.
Home
About Us
some>
more
sub
menu
items
R.
_
Dont miss your chance to WIN 10 hours of private jet travel from Microsoft®
Office Live http://clk.atdmt.com/MRT/go/mcrssaub0540002499mrt/direct/01/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Position links on Image bugs
Eleanor,
Welcome to the list and welcome to the wonderful, exciting and never ever
frustrating world of using CSS.
You were right. The problem did lie in the way you were doing the top
navigation. I would recommend slightly modifying your html and css to make
it a little easier on yourself.
Change the html to this:
Home
About
Gallery
History
For Collectors
Now we can set the image as a background for the nav division which makes
the whole process a lot easier.
Now it is just a matter of editing your css. I have the lines I edited
posted below, and comments explaining, albeit not all that clearly I am
sure, why the change. Go ahead and experiment with different values to
adjust margins and paddings and see the effects different lines have on your
layout in IE and firefox, but as of now, the design should work for you in
both browsers.
#nav {
margin: -8px -8px; /* Currently, the way you have this, the margin is set
to -8px on all sides */
margin-bottom: 0px; /* IE subtracts the -8px above from the height of div so
we needed the bottom margin to be 0 */
background: url(nav.gif) no-repeat; /* background-image instead of actual
image, easier to use, faster to load */
height: 145px; /* Height of your background-image to ensure that full image
shows */
display: block;
width: 701px; /* Width to ensure that image is show entirely */
}
#nav1{
padding-top: 120px; /* Pushes your text down */
padding-left: 70px; /* Pushes your text to the right -- margins don't work
here cuz of IE */
}
#body-container {background-color: #EFECD7;
margin: 15px 3px 10px; /* Here the top margin at 15px worked before but not
anymore */
margin-top: 0px; /* So I changed it here to 0 to bring container flush with
nav --- You can put this in the line above */
border-top: none; border-right: solid #BC901A 1px; border-left: solid
#BC901A 1px; border-bottom: solid #BC901A 1px;
padding: 15px;}
Thanks,
Tim Kadlec
Message: 24
Date: Mon, 11 Sep 2006 19:42:31 -0500
From: Eleanor Hand <[EMAIL PROTECTED]>
Subject: [css-d] Position links on Image bugs
To: css-d@lists.css-discuss.org
Message-ID: <[EMAIL PROTECTED]>
Content-Type: text/plain; charset=US-ASCII; delsp=yes; format=flowed
Hello,
This is my first post to this forum so let me say thank you for
taking the time to look at this.
I have decided to try and create a client website using CSS
positioning as the main layout and design. Of course the learning
curve is huge and I'm stuck. So here I am. I am having several issues
with different browsers. They all seem to stem from positioning text
on top of an image. Everything is working well in Safari and Firefox
on my mac. The problem arises in IE on both the mac and the pc
platform. IE in Mac is currently not displaying the links but if it
were they wouldn't work as links. IE Windows is not displaying the
links at all. I am currently working to resolve this and would
appreciate input on whether or not this positioning issue is
resolvable. Am I better off using roll over buttons?
The site can be viewed here:
http://www.eleanorhand.com/clients/rangeloff/index.php
http://www.eleanorhand.com/clients/rangeloff/rageloffstyles.css
Thank You,
El
spamaholic(at)earthlink.net - it's my junk email and its real
_
Windows Live Spaces is here! Its easy to create your own personal Web site.
http://spaces.live.com/signup.aspx
__
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] Navigation woes
Vicki,
Not sure about your problem with Opera.
However, for IE, the problem is the padding below:
#nav li{ /* all list items */
position : relative;
float : left;
line-height : 1.25em;
margin-bottom : -1px;
width : 188px;
/*width : 11em;*/
padding: 5px 0 0 3px;
}
Change it to:
#nav li{ /* all list items */
position : relative;
float : left;
line-height : 1.25em;
width : 188px;
/*width : 11em;*/
margin: 5px 0 -1px 3px;
}
The links will then work fine. You may find you need to add a little padding
on the right to #nav though.
Tim Kadlec
Message: 4
Date: Sun, 20 Aug 2006 08:43:42 +1000
From: Vicki Stebbins <[EMAIL PROTECTED]>
Subject: [css-d] Navigation woes
To: css-d@lists.css-discuss.org
Message-ID: <[EMAIL PROTECTED]>
Content-Type: text/plain; charset="us-ascii"; format=flowed
Hi all,
I've just begun a redesign of a site (a love job) and am having trouble
with my navigation div.
In IE the popout menu appears but you can only select the top menu item, in
other words if it shows:
* cats
* dogs
only cats can be selected and the menu disappears for dogs.
In Opera the width of the div grows to house the popout menu within the div
instead of popping out outside of the div.
Works fine in FF and validates well for the CSS and xhtml.
I'm trying to keep this site easy and clean and easy to update... the
previous site has ended up cluttered and difficult to maintain other the
cats and dogs.
The page is at http://www.animalrights.org.au/new/
CSS at http://www.animalrights.org.au/new/styles/arrg.css
I've used the menu before and didn't have this problem but this time I was
wanting the main nav to show as the boxes.
Hoping someone can help.
Many thanks
Vicki
"I'd put my money on the Sun and solar energy. What a source of power!
I hope we don't have to wait until oil and coal run out before we tackle
that."
-Thomas Edison
_
On the road to retirement? Check out MSN Life Events for advice on how to
get there! http://lifeevents.msn.com/category.aspx?cid=Retirement
__
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] Horizontal Scroll Bars on a CSS centered page
Ian,
I believe the problem comes from the negative left margin. I am not sure on
the technical reasoning behind it, but it appears that when a standards
based browser like Firefox sees the large negative margin to the left, it
doesn't deem it necessary to provide the ability to scroll there.
I would follow Micky's advice and center the wrapper the way he suggested.
Tim Kadlec
Message: 14
Date: Sat, 19 Aug 2006 01:07:05 +0100
From: Ian Piper <[EMAIL PROTECTED]>
Subject: [css-d] Horizontal scrollbars on a CSS-centred page
To: css-d css-d
Message-ID: <[EMAIL PROTECTED]>
Content-Type: text/plain; charset=US-ASCII; delsp=yes;
format=flowed
Hi all,
I've just had my attention drawn to a small problem with a site
(http://www.bbfcontracts.co.uk/). I made this site fixed width and
centred its pages using this piece of CSS:
#wrapper {
width: 860px;
position: relative;
left: 50%;
margin-left: -430px;
border-left: 1px solid #33;
border-right: 1px solid #33;
border-bottom: 1px solid #33;
}
However, someone has pointed out to me that the browser window
doesn't show a horizontal scrollbar (in Safari or IE) when the
browser window is narrow. In Firefox it does show a scrollbar but it
is not possible to scroll to the left edge of the page.
Where have I gone wrong with my CSS?
Ian.
--
Dr Ian M Piper
[EMAIL PROTECTED]
skype: ianmpiper
--
Where is the wisdom we have lost in knowledge?
Where is the knowledge we have lost in information?
--
Message: 15
Date: Fri, 18 Aug 2006 17:19:58 -0700
From: Micky Hulse <[EMAIL PROTECTED]>
Subject: Re: [css-d] Horizontal scrollbars on a CSS-centred page
To: css-d css-d
Message-ID: <[EMAIL PROTECTED]>
Content-Type: text/plain; charset=ISO-8859-1; format=flowed
Ian Piper wrote:
>#wrapper {
> width: 860px;
> position: relative;
> left: 50%;
> margin-left: -430px;
> border-left: 1px solid #33;
> border-right: 1px solid #33;
> border-bottom: 1px solid #33;
>
>}
Hi,
I am probably not understanding the question or the problem(s)... but
why not use this to center your page:
body {
margin: 0;
padding: 0;
text-align: center;
}
#wrapper {
text-align: left;
margin: 0 auto;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #333;
}
Sorry if I did not get your question... I am stupid sometimes. :)
--
_
Express yourself instantly with MSN Messenger! Download today - it's FREE!
http://messenger.msn.click-url.com/go/onm00200471ave/direct/01/
__
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/
