[css-d] IE 7 does not display footer where FF does, Surprise!
Greetings, page: www.gardenworkd-wny.com/index.php css: www.gardenworkd-wny.com/css/gardenworks_main.css You guessed it, another ie 7 peculiarity. I have a footer that works in FF3, Opera, and Safari. It appears just below the main text. In IE7 it is several inches down. I tried to put in an ie7 only style sheet. I have never done it before and I am not sure it is right. Anyway, it does not work. So I am looking for advice on what I have done wrong or what I have overlooked in ie7 to solve the problem. This occurs on all my pages with footers, but i just gave you the main page as an example. Also, the header is a bg image and I am wondering if that has something to do with it. This is the first time I have done a header this way so I have little experience to draw on. Many thanks for the help. Best, -- Scott Brasted sc...@brastedhouse.com 716-753-6926 __ 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] Reviewing work
Jason add overflow:hidden to the #NavBar id. The problem is that the navigation was breaking into two lines because when font increased, it was wider than the specified width. The reason it looked like blank space on the left of the left column was because the link is white and it was invisible, if you want to see what I mean go ahead and increase font size or zoom so the page breaks and move your mouse around on the blank white area on the left. __ 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] DIV background image in wrong place
On Apr 25, 2009, at 11:56 AM, phidlerw...@gmail.com wrote:
> I'm obviously doing something wrong(ly):
>
> I want a background image to appear in the lower left of a div, so
> I've styled it so:
>
> #page
> {
> width: 939px;
> margin: 0 auto;
> min-height: 650px;
> background-image: url(images/zengrass40.gif);
> background-repeat: no-repeat;
> background-position: 0% 100%;
> }
>
> But it appears in the top left of the div. I'd like it at the bottom.
Oh, but the image is at the bottom of the div#page :-)
Ad a bottom border to that div, and you'll see it.
The problem you have is: the main content of that div#page is inside a
floated block (div#content). That div does NOT contribute to the
height of div#page because it is floated (that is the correct
behaviour: floated elements are removed from the flow).
I don't see any good reason why you float that div#content. Just give
some appropriate margins and you should be set.
Otherwise, you'll have to look up at 'containing floats'.
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
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] DIV background image in wrong place
I'm obviously doing something wrong(ly):
I want a background image to appear in the lower left of a div, so
I've styled it so:
#page
{
width: 939px;
margin: 0 auto;
min-height: 650px;
background-image: url(images/zengrass40.gif);
background-repeat: no-repeat;
background-position: 0% 100%;
}
But it appears in the top left of the div. I'd like it at the bottom.
What's the obvious problem I'm overlooking?
Sample link: http://integratedlifeservices.org/ . The page div is the
main content area between the nav bar and the blue footer.
Thanks in advance,
Paul
__
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] Reviewing work
jason...@comcast.net wrote: > I see what you're saying. What would I need to modify to stop that from > happening? The body of the whole page or just those columns? Or would I need > to modify all font properties of all the elements? > I think it best you wait. There are among those on this list who are far better at CSS than me. One of them can pull it off for you. You can count on it. Wait __ 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] Reviewing work
I see what you're saying. What would I need to modify to stop that from happening? The body of the whole page or just those columns? Or would I need to modify all font properties of all the elements? - Original Message - From: "David Laakso" To: jason...@comcast.net Cc: css-d@lists.css-discuss.org Sent: Friday, April 24, 2009 7:04:58 AM GMT -06:00 US/Canada Central Subject: Re: [css-d] Reviewing work jason...@comcast.net wrote: > > I have a question. What do you mean by preventing the left column from > dropping? I'm still learning, so I've got a lot of information gaps that need > to be filled. Are you talking about the background color from the left > sidebars? Or something else? > > Some web pages display incorrectly if you increase the text size. On your page, the left column disappears (drops). __ 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] Rounded corners repeating in IE6
Anne E. Shroeder wrote:
> I'm using the technique described here:
> http://webdevtips.co.uk/webdevtips/style/border.shtml to accomplish rounded
> borders on this somewhat complex design - the client is insistent on fixed
> heights, so it's been quite a trick. The problem now is that the top right
> corner seems to be repeating itself and the bottom left and right corners
> are not showing up at all in IE6:
>
> http://www.language-works.com/SmartSign/template_frames2.htm
[...]
>
> Anne
Hello Anne.
This page has many problems in IE6, one is that div#column3 has
completely dropped below the main content. There are also problems in
IE7. The initial problem area is in or surrounding the form in the 1st
columns.
#column1 #login {
background-color:#FEFEFE;
width: 191px;
margin: 0 7px 19px 8px;
padding:0;
}
#column1 form {
margin:-6px 8px 22px 8px;
}
Changing a width and a margin seems to bring IE6 under some control.
BTW, this is a hack fixed since I do not know what is quite happening.
You have stirred that cauldron of bugs that is IE6. :-)
* html #column1 #login { /* target IE6 */
width: 178px;
}
* html #column1 form { /* target IE6 */
margin-right:-4px;
}
Next changing overflow:auto to overflow:hidden remove the scrollbar in IE6.
#column2 #newsBlurbs {
height:352px;
padding: 5px 10px 5px 2px;
overflow:hidden; /* change for IE6 */
}
Next changing the margin-right on div#column3 (partially removing the
float) brings div#column3 up in the correct place.
* html #column3 {
margin-right:-29px;
}
This does not solve the problems that you state. Here is a little demo
with the hacks for IE6.
Something is causing some overflow of the background for div#column3.
Maybe correcting those 45 validation errors in the XHTML may help here.
Also, at this moment IE6 and IE7 are not handling those negative margins
on the list
#column3 ul li {
margin-left:-28px;
margin-top:-10px;
}
and this causes div#column3 to have greater height which effects the
positioning of the rounded corners at the bottom of div#column3. I will
take a greater look later.
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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] IE and Opera incorrectly displaying nav
Daniel Hammond wrote: >> Daniel Hammond wrote: >>> URL: http://www.numccreativeservices.org/site/index.htm CSS: >>> http://www.numccreativeservices.org/site/cs.css FF, Safari, and >>> Google Chrome treat the navigation correctly. It's the "active" >>> state (when you click on a button) that is the issue here. IE and >>> Opera don't show the active state as it's supposed to be. >> >> Perhaps they don't support the :active pseudo class on list item >> elements? I know IE7 does not, and Opera 9.6, 10, and IE8 appear >> not to either. >> >> Cordially, David -- >> > > But if you test it in Opera/IE, you'll see that the small graphic on > the left side of the buttons does respond to the active state. It's > just the larger graphic that is the rest of the button that does not. > Does that make sense? > Precisely. The left side graphic is revealed by the active state on the 'A' element, while the right side graphic is triggered by an active state on the list item (LI). Cordially, David -- __ 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] Sticky footer - double decker possible?
This method has worked for me on various projects:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
There was just too much code in your example, so I did a quick one.
You can extend it.
HTML:
Your website content here.
Copyright (c) 2008
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -194px;
width: 942px;
border: 1px solid #000;
}
.push {
height: 194px;
}
.footer {
height: 194px;
width: 100%;
}
.water {
width: 942px;
border-right: 1px solid #000;
border-left: 1px solid #000;
margin: 0 auto;
background: url(ADD IMAGE LOCATION) bottom center scroll no-repeat;
height: 155px;
}
.copyright {
background-color: #ccc;
height: 43px;
}
Hope I haven't misunderstood anything here.
Regards
-
Mustafa Quilon
2009/4/19 Anne E. Shroeder :
> My client has a design comp that I'm finding extraordinarily challenging to
> implement -- the currentt challenge is implementing a sticky footer that has
> two parts AND that maintains a right/left border on the center column (right
> and left column contain no content) that extends all the way down to the
> footer.
>
> Using the methodology described here:
> http://brassblogs.com/blog/sticky-footer I've been able to implement the
> basic grey line along with the left/right shadows and get the footer to
> stick to the bottom - BUT not the left/right borders to extend down.
>
> Worse, when I add the image of the water on top of the grey line, I find I
> can only put in a min-height to get it to work - which really means it isn't
> working.
>
> When I add in the orange crossbar, everything breaks apart. Yikes.
>
> Is it possible to code this?
>
> The comp is here: http://www.language-works.com/swim/comp.jpg
> My rather unsatisfactory implementation here:
> http://www.language-works.com/swim/stickyfooter.htm
>
> Anne
>
>
> __
> 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-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] Menu items
Il giorno 24/apr/09, alle ore 18:04, David Hucklesby ha scritto: > If you were using HTML I'd suggest leaving off the closing . > But I notice you use an XHTML 1.1 DOCTYPE, which is only supposed to > be used for documents delivered as XML. So I have to ask why? David, your question is beyond my knowledge. I just re-used a template I liked. I'm sorry. :-) However, the problem was solved just putting all the links on the same line instead of using a carriage return each time. mario __ 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] WTF, IE!?
Hey there,
Instead of using a margin-top, append this:
#content {
margin: 0 0 0 160px; padding: 62px 0 16px 15px;
position: relative;
top: 42px;
}
Also, instead of giving the paragraphs a width and triggering another
IE 6 bug, you could just use paddings:
#content p {
width: auto;
margin-left: 30px;
padding: 0 120px 0 0;
text-align: justify;
}
Regards
-
Mustafa Quilon
2009/4/17 d.williams :
> Hi all,
>
> I could use help figuring out what the heck is going on in IE6 and 7
> for this page:
>
> http://distantelegy.net/clients/ebip
>
> I need to be able to push div#content down, which is easily
> accomplished with margin-top in all other browsers. Nothing I do seems
> to move that sucker down and I think it's because of hasLayout.
>
> If I specify with: auto instead of width: 560px, the margin-top
> immediately works and the box drops down, clearing the image, etc. But
> when I do that a whole new set of problems start, like for some reason
> the first two paragraphs start to have a white background color. But
> only the first two paragraphs, the third one is fine! (WTF!?) And the
> background image decides to display 160px to the left. But only on the
> index page; on the other pages, it loads in the right place! (WTF!?)
> If I add zoom: 1 to the paragraphs, it fixes the background-color
> thing, but when I do that, the top paragraph has a totally different
> width and margin than the other two paragraphs. (WTF!?)
>
> So, anyway, I'm confused as hell and I don't know how to fix one thing
> without causing the other weird dominoes to fall. Any help would be
> greatly appreciated!
>
> If you load the page in IE6/7, you'll see the regular version. I've
> added an IE stylesheet that implements the width: auto and some other
> things, which you can trigger using the "Show IE styles" link in the
> top left. You'll have to click this for every page, unfortunately,
> since I didn't want to re-write every single link to include
> ieStyle=true.
>
> Thanks so much in advance!
>
> Danny
> __
> 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-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] IE and Opera incorrectly displaying nav
> Daniel Hammond wrote: >>> Daniel Hammond wrote: URL: http://www.numccreativeservices.org/site/index.htm CSS: http://www.numccreativeservices.org/site/cs.css FF, Safari, and Google Chrome treat the navigation correctly. It's the "active" state (when you click on a button) that is the issue here. IE and Opera don't show the active state as it's supposed to be. >>> Perhaps they don't support the :active pseudo class on list item >>> elements? I know IE7 does not, and Opera 9.6, 10, and IE8 appear >>> not to either. >>> Cordially, David >> But if you test it in Opera/IE, you'll see that the small graphic on >> the left side of the buttons does respond to the active state. It's >> just the larger graphic that is the rest of the button that does not. >> Does that make sense? > Precisely. > The left side graphic is revealed by the active state on the 'A' > element, while the right side graphic is triggered by an active > state on > the list item (LI). > Cordially, > David I see. Is this a futile endeavor then? Should I abandon that effect for the navigation? Or is there some way around it? Thanks, Daniel __ 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] Menu items
Mario Rizzi wrote: > [... Re:] www.equatore.org. > > Now we have new content to add and the site needs a redesign. I am > working on it and everything seems to be fine, with one exception. I > have a menu with the following Html: > > > > Link > Link > Link > > > [...] > > When I hover over the menu, I can see a little gap between one item > and the next one. Is there a way of getting rid of that space and go > directly from one link to the next one? > If you were using HTML I'd suggest leaving off the closing . But I notice you use an XHTML 1.1 DOCTYPE, which is only supposed to be used for documents delivered as XML. So I have to ask why? Cordially, David -- __ 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] Rounded corners repeating in IE6
Thanks so much -- unfortunately the 45 validation errors come from the code
that the client gave me to implement (their RSS feed), so nothing I can do
about that :(
I was thinking that probably the issues in IE6 are due to the peekaboo bug
(I think that's what it's called) because there are so many nested divs and
IE6 is basically freaking out and repeating stuff.
It gets even better - they want the 2 cols on the right to be in iframes, so
I've implemented that
http://www.language-works.com/SmartSign/template_frames3.htm but of course
with IE6 it wants a narrower frame, so it needs conditional comment ... but
I don't even know what platform they're developing on so have just put in a
double bit of code for now with the IE6 comment so they can know what width
to implement.
What worries me is that this code will be taken by some programmers and
messed with even further, and it seems to me that it's fragile, at best.
They've said as long as it displays on 1024 they're ok with it (though of
course it breaks horribly on anything less). IMO the design is meant for
print and not the web, but they don't wnat to hear that
Anne
- Original Message -
From: "Alan Gresley"
To: "Anne E. Shroeder"
Cc:
Sent: Friday, April 24, 2009 11:33 AM
Subject: Re: [css-d] Rounded corners repeating in IE6
> Anne E. Shroeder wrote:
>> I'm using the technique described here:
>> http://webdevtips.co.uk/webdevtips/style/border.shtml to accomplish
>> rounded borders on this somewhat complex design - the client is insistent
>> on fixed heights, so it's been quite a trick. The problem now is that
>> the top right corner seems to be repeating itself and the bottom left and
>> right corners are not showing up at all in IE6:
>>
>> http://www.language-works.com/SmartSign/template_frames2.htm
> [...]
>>
>> Anne
>
>
> Hello Anne.
>
> This page has many problems in IE6, one is that div#column3 has completely
> dropped below the main content. There are also problems in IE7. The
> initial problem area is in or surrounding the form in the 1st columns.
>
> #column1 #login {
> background-color:#FEFEFE;
> width: 191px;
> margin: 0 7px 19px 8px; padding:0;
>
> }
> #column1 form {
> margin:-6px 8px 22px 8px;
> }
>
>
> Changing a width and a margin seems to bring IE6 under some control. BTW,
> this is a hack fixed since I do not know what is quite happening. You have
> stirred that cauldron of bugs that is IE6. :-)
>
> * html #column1 #login { /* target IE6 */
> width: 178px;
> }
>
> * html #column1 form { /* target IE6 */
> margin-right:-4px;
> }
>
>
> Next changing overflow:auto to overflow:hidden remove the scrollbar in
> IE6.
>
> #column2 #newsBlurbs {
> height:352px; padding: 5px 10px 5px 2px;
> overflow:hidden; /* change for IE6 */ }
>
> Next changing the margin-right on div#column3 (partially removing the
> float) brings div#column3 up in the correct place.
>
> * html #column3 {
> margin-right:-29px;
> }
>
>
> This does not solve the problems that you state. Here is a little demo
> with the hacks for IE6.
>
>
>
>
> Something is causing some overflow of the background for div#column3.
> Maybe correcting those 45 validation errors in the XHTML may help here.
>
> Also, at this moment IE6 and IE7 are not handling those negative margins
> on the list
>
>
> #column3 ul li {
> margin-left:-28px;
> margin-top:-10px;
> }
>
> and this causes div#column3 to have greater height which effects the
> positioning of the rounded corners at the bottom of div#column3. I will
> take a greater look later.
>
>
> --
> Alan http://css-class.com/
>
> Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
>
__
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] Reviewing work
jason...@comcast.net wrote: > > I have a question. What do you mean by preventing the left column from > dropping? I'm still learning, so I've got a lot of information gaps that need > to be filled. Are you talking about the background color from the left > sidebars? Or something else? > > Some web pages display incorrectly if you increase the text size. On your page, the left column disappears (drops). __ 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] Menu items
Hi Mario, [quote] When I hover over the menu, I can see a little gap between one item and the next one. Is there a way of getting rid of that space and go directly from one link to the next one? [/quote] Change: Link Link Link To: LinkLinkLink For whatever reason if you include a Carriage Return it adds a non-breaking space between the links. Tested in FF3. ~Mx http://www.mxdx.co.uk __ 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] Regarding inline style
hello mx, Thank you very much , i will try to use javascript to work with the navigation bar.Thank you so much all for your help. God bless. Regards, Gautam Bhatia . On Thu, 2009-04-23 at 13:42 +0100, Martyn Merrett wrote: > Hi Gautam, > > Don't apologise -I'm sure you english is better than most kids these days! (: > > I can see that each of the 4 links has 3 nodes. > You would like it if either the link or any node it would highlight > that link (A:active). > > I have done this in the past using PHP to generate the menu code for me. > > Aside from individually updating each page with a class I can't see it > would be possible. > You could possibly use javascript to detect the URL and add the style. > > ~Mx > http://www.mxdx.co.uk > > > > 2009/4/23 Gautam Bhatia : > > hello mx, > > Thank you for the reply sir, sorry my engliish is not > > good ,I'm indian so please bear with me. ok this is what i'm trying to > > do on this link .. > > > > http://www.muttertag-geschenke.net __ 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/
