Re: [css-d] IE Margin Issues

[Gunlaug Sørtun]

David Terrell wrote:

> I have an issue with a negative margin in IE. I have this site set up
> so that the navigation falls back on top of the header [...]

> http://www.lyramid.com/test

The following additions/corrections should bring IE in line with the
others, or the other way round...

#menu {
background: transparent;
float: left;
margin-top: -17px;
margin-left: 0;
}

#nav {
margin: 0 0 0 26px;
padding: 0;
height: 40px;
overflow: hidden;
}

That'll take care of IE's need for "Layout", and level out the various
margin and padding defaults on lists. It will also control IE6'
"auto-expansion" bug.



If you also want the page/layout as a whole to behave properly - not
having parts displaced if window-width is changed in IE, you should make
the following corrections...

body {
/* width: 800px;
margin: 0 auto; delete these */
}

#container {
/* left:50%; delete this */
margin: 0 auto; /* add this */
}


It would also be a good idea to put comments in those empty divs...





...to prevent "auto-expansion" in IE6.
Once you put some real content in there the comments can be deleted.

regards
Georg
-- 
http://www.gunlaug.no
__
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 Margin Issues

[Chris Williams]

Don't put the header image CSS in the style sheet, but on the code for the
page...

> From: David Terrell <[EMAIL PROTECTED]>
> Subject: Re: [css-d] IE Margin Issues
> 
> The header image has to change for every page so it
> would be impractical to create a different style sheet
> for each page so that the header image could be the
> background of the header div.

__
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] drop-down navigation (not hovering in IE)

[Ryan Oswald]

well, I got then menu working correctly in all browsers.
Then only problem now is... in IE 7 when you click on one of the drop- 
down
menu items then hover off the drop-down does not go away.
Any ideas why this is?
http://www.ozworkz.com/delnorte/temp/

Thanks,
Ryan

On Jun 4, 2008, at 12:58 PM, Ryan Oswald wrote:

> Hi,
> I'm having trouble with this css drop-down/hover menu.
> Its working perfect in firefox and safari, but will not show up in
> IE 6 & 7. You can see it here: http://www.ozworkz.com/delnorte/temp/
>
> The drop-down is only on the "Locations" menu item.
> The drop-down would not show up at all in any browsers until I  
> added the
> "z-index: 99;" to the css.
>
> Here is the css for the menu: (I'm sure its not the most efficient,  
> but I'm just trying to get it to work at this point).
> view the full css here: http://www.ozworkz.com/delnorte/temp/style.css
>
> also I've set it up so that when the text-size in the browser is  
> increased, the menu stays in tact (the background images appear the  
> same).
> if that makes sense.

__
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] Fix for IE bottom margin float bug?

[David Laakso]

Timothy Kelty wrote:
> Does anyone know an workaround/fix/hack for the problem described here:
> http://www.maratz.com/blog/archives/2006/11/11/ie-7-quirks-floats-and-margins/
>
> Essentially, when an element is floated within a container and has a
> bottom margin, IE6 and 7 seem to ignore the bottom margin. I've tried
> several float clearing methods on the container, but the margin still
> seems to be ignored.  Any ideas (other that having to use padding)?
>   


/With that particular example/, one way, without using padding-bottom, 
is to set of min-height of 100px; and, feed IE/6 height: 100px [1];  
This might not be a wise or practical  method in /all/ situations.
[1] 

-- 
http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Fix for IE bottom margin float bug?

[Timothy Kelty]

Does anyone know an workaround/fix/hack for the problem described here:
http://www.maratz.com/blog/archives/2006/11/11/ie-7-quirks-floats-and-margins/

Essentially, when an element is floated within a container and has a
bottom margin, IE6 and 7 seem to ignore the bottom margin. I've tried
several float clearing methods on the container, but the margin still
seems to be ignored.  Any ideas (other that having to use padding)?
__
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] Target IE7? Or Something Better?

[Chris Akins]

Actually, I DID add the following to target IE7 only:

*:first-child+html #navListHor img {margin-top:9px;}

But I guess I'm still wondering if I can do this more efficiently.  'Cause
now I have 3 rules for those menu images.  One for standards compliant
browsers, one for IE6, and now one for IE7.

Without the above rule, IE7 shows the menu images too high.

Regarding the NAGW conference - I'd love to go, but budgets are very tight
here.  It will be a long shot me going this year.  Thanks for the comments
on that sub-site of ours.  It was the first truly CSS site I did.  Now I'm
in the middle of redesigning our entire site with CSS layout.  Fun stuff!

Regards,

Chris

On Wed, Jun 4, 2008 at 8:51 PM, Bill Brown <[EMAIL PROTECTED]> wrote:

> > I'm late to the IE7 game, so I'm not sure if it should now be acting much
> > like FIrefox, but with this rule it definitely isn't.
> > I'm just trying to find where the ultimate fault lies and how to address
> it
> > best.
>
> Chris,
>
> Tests on IE7/Vista and Firefox/Ubuntu 8.04 side-by-side show identical
> or nearly identical presentations, and certainly no flaws. Am I missing
> something or have you already fixed this for IE7?
>
> Nice looking site, including back to the root home page. Great work.
>
> Incidentally, are you going to the National Association of Government
> Webmasters in Chicago this September (http://www.nagw.org)? Zoe
> Gillenwater is presenting a two-hour conference session on CSS and I am
> presenting a four-hour pre-conference session on Advanced CSS.
>
> Anyway, hope that helps.
> Bill Brown
> TheHolierGrail.com
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Firefox problem with flyout menus

[Ingo Chao]

Tom McNeer wrote:
> Ingo,
> 
> Thanks very, very much for your explanation. I didn't actually see anything
> happen in Firebug when I selected #twocolumn and moved my mouse near the
> borderline. What should I have seen?

It was just a debugging note. When hovering over the submenu, the mouse 
looses focus once this imaginary "borderline" is passed, and your menu 
collapses. This wrong behavior is independent from the chosen text-zoom. 
Enlarge the text by one step in Firefox 2, the menu still collapses on 
the same "borderline". So the problem could not be found in the menu 
entries or its scripting, but in its underlying structures.

> 
> But of course, your solution worked. I'm very grateful.
> 
> Just to be clear: the CSS in those divs is part of a pre-built commerce
> package, whose author I'm doing some work for. He freely admits that the
> current CSS is a mess, and has a project going to build far better
> templates.
> 
> So we'll need to see what, if any, effect the change in those attributes has
> in other areas (the person who built the existing CSS is long gone). But now
> we know the problem.
> 
> And I'm very appreciative for your help.
> 
> 
Glad I could help. Again, any other containing floats technique should do.


thanks,
  Ingo


-- 
http://www.satzansatz.de/css.html
http://www.dolphinsback.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Firefox problem with flyout menus

[Tom McNeer]

Ingo,

Thanks very, very much for your explanation. I didn't actually see anything
happen in Firebug when I selected #twocolumn and moved my mouse near the
borderline. What should I have seen?

But of course, your solution worked. I'm very grateful.

Just to be clear: the CSS in those divs is part of a pre-built commerce
package, whose author I'm doing some work for. He freely admits that the
current CSS is a mess, and has a project going to build far better
templates.

So we'll need to see what, if any, effect the change in those attributes has
in other areas (the person who built the existing CSS is long gone). But now
we know the problem.

And I'm very appreciative for your help.


-- 
Thanks,

Tom

Tom McNeer
MediumCool
http://www.mediumcool.com
1735 Johnson Road NE
Atlanta, GA 30306
404.589.0560
__
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 problem with flyout menus

[Ingo Chao]

Tom McNeer wrote:
> Hi folks,
> 
> Before I ask for help, let me warn everyone that the code I'm about to point
> you to does not validate. And I do not (at the moment) have
> access/permission to make it so.
> 
> But if you're willing to take a look, I'd appreciate any opinions on the
> problem.
> 
> It involves the integration of a CSS/Javascript menu generated by OpenCube's
> QuickMenu. I have contacted their support regarding the issue; but the
> problem seems not to be in their code, but in its interaction with other
> styling or Javascript within the page. And it's creating an effect I've
> never seen before.
> 
> You may view an example at http://sitedirectorcssdev4.quilldesign.com. In IE
> 6 and 7, and in Safari, the drop-down/flyout menus which descend from
> "Category 1" and "Category 2" work correctly.
> 
> But in Firefox, on both Mac and PC, the sub-menus will often disappear even
> while hovered over. Typical behavior is for the menus to appear correctly to
> start with, then begin to disappear as one moves around. For example, start
> with Category 1, then go to Sub-Category 3, then move out to
> Sub-sub-category Five.
> 
> I know I'm asking for help on something that can't be tested properly at the
> moment. I'm just hoping it's something that someone may have run into
> previously, and can point me in a direction for troubleshooting.
> 
> Thanks in advance for any suggestions.
> 

There are two nested boxes following the header with the menu in 
question, #main and #twocolumn. both have overflow:hidden set, probably 
to contain floats, the "easy way" (the buggy way, I should add).

But Firefox seems to loose track on the menu once the mouse hovers a 
position above the overflow area. Your script just slows down the 
effect. Open your page with Firebug and highlight #twocolumn, then let 
the mouse gently move towards the borderline.

In Firebug, remove overflow:hidden from both and use display:table 
instead, for debugging.

You will have to choose another containing floats method. I'd suggest 
starting with a solid clearer, or using the easyclearing method.

Ingo




-- 
http://www.satzansatz.de/css.html
http://www.dolphinsback.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Firefox problem with flyout menus

[Tom McNeer]

Hi folks,

Before I ask for help, let me warn everyone that the code I'm about to point
you to does not validate. And I do not (at the moment) have
access/permission to make it so.

But if you're willing to take a look, I'd appreciate any opinions on the
problem.

It involves the integration of a CSS/Javascript menu generated by OpenCube's
QuickMenu. I have contacted their support regarding the issue; but the
problem seems not to be in their code, but in its interaction with other
styling or Javascript within the page. And it's creating an effect I've
never seen before.

You may view an example at http://sitedirectorcssdev4.quilldesign.com. In IE
6 and 7, and in Safari, the drop-down/flyout menus which descend from
"Category 1" and "Category 2" work correctly.

But in Firefox, on both Mac and PC, the sub-menus will often disappear even
while hovered over. Typical behavior is for the menus to appear correctly to
start with, then begin to disappear as one moves around. For example, start
with Category 1, then go to Sub-Category 3, then move out to
Sub-sub-category Five.

I know I'm asking for help on something that can't be tested properly at the
moment. I'm just hoping it's something that someone may have run into
previously, and can point me in a direction for troubleshooting.

Thanks in advance for any suggestions.

-- 
Thanks,

Tom

Tom McNeer
MediumCool
http://www.mediumcool.com
1735 Johnson Road NE
Atlanta, GA 30306
404.589.0560
__
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] html comments causing ghost text to appear in ie6 ???

[David Hucklesby]

On Tue, 03 Jun 2008 02:47:05 -0400, snak detek+0r wrote:
> I can barely even describe what's happening, but it's easy to look at.
>
> see here -> http://tinyurl.com/3ezwej
>
> the top and bottom sections each have a line of html comment. In these 
> sections, the
> last letter in the div is REPEATED below -- for no reason -- shouldn't be 
> there!
>
> ...I removed the comments and problem goes awayOnly, now I'm very, very 
> curious.
> Does anyone know why this is?
>

Georg already gave you the why. To solve the problem, i have found
that butting comments against a tag usually eliminates the problem.
All my closing DIVs look something like this, for example:

  

YMMV.


Cordially,
David
--

__
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 and img trouble

[Arlen Walker]

On Jun 4, 2008, at 10:46 PM, christopher wrote:

> I've got a question about a layout I'm doing in which I
> keep getting the background color poking out between
> the images I'm using. I'm not sure why this is, and
> it's only in Internet Explorer (opera and firefox
> display it with out this). I know that the background
> is poking out of the bottom of the image, if that
> matters.

.banners img { vertical-align: bottom; }

What's happening?

http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps

Have Fun,
Arlen

--
In God we trust, all others must supply data

__
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 Margin Issues

[Arlen Walker]

On Jun 4, 2008, at 10:33 PM, David Terrell wrote:

> Hello All,
>
> I have an issue with a negative margin in IE. I have
> this site set up so that the navigation falls back on
> top of the header as seen in this capture:

Wouldn't it have been simpler all around to just use the header image  
as a background, and put the menu inside the header div? Use of  
negative margins has a spotty record. As you noticed, it doesn't  
always deliver the goods.

Have Fun,
Arlen

--
In God we trust, all others must supply data

__
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] problems with rollovers on dropdowns

[Bill Brown]

> http://www.blackfootchallenge.org/rebeccatest/homepage1_test.html 

> In FF, looks generally o.k., but hovering on the dropdown list items adds in
> some undesirable margins and padding, though I can't find where those are
> in the CSS. IE 7 shows many more problems. Too much padding above
> "smallnav", dropdowns on "nav" appear too high, and rollovers are not clean,
> margin of the first navigation item should be against left edge.
> 
> Help!
> 
> -Becca

Hi Becca,

I created a working version of your navigation here:
http://theholiergrail.com/tests/blackfootchallenge/index.html

The HTML and CSS you need are both embedded in the page so you can
access them easily. It should be easy to tell which styles are
pertinent, but if you have any questions, please let me know.

It works on my Firefox 3/Ubuntu Hardy Heron and IE6/WinXP and IE7/Vista
setups.

Hope it helps.
Bill Brown
TheHolierGrail.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/