[css-d] IE/Win has layout problem
Thanks Alan! that cleared it up kind of, but now i'm getting a small
gap next to the content graphic. It looks as if the background-image:
url(Images/content_bg_01.gif); is being cut off on the left side. my
initial reaction would be to give it a width but then we go back to
the first problem. Any thoughts on why this is happening?
http://www.touchmassageboutique.com/
patrick mattison wrote:
> I'm having problems with IE Win rendering my page. Can anyone offer
> me a clue???
> The whole content section gets bumped below the menu, so i tried
> adding a style sheet for IE and added:
> #content {margin-left: 0;}
>
> that brought it up to where it's supposed to be except It looks like
> the #content area is about 10px to the left.
>
> Any help would be greatly appreciated!
Hello Patrick, IE likes to play tricks to bewilder, change the
following in these rule sets.
#content {
margin: 0 0 0 262px;
padding: 0;
border: 0;
width: 538px; /* delete triggering hasLayout */
background-image: url(Images/content_bg_01.gif);
background-repeat: no-repeat;
background-position: top left;
}
#textarea {
margin: 0px 50px 0 30px; /* change top margin to zero */
padding: 0; /* delete */
padding-top: 85px; /* add pushes "About Us" down */
text-align: left;
}
>From the special IE stylesheet
#content {margin-left: 0;} /* delete */
The 10px difference as seen in IE is due to the #content div
having ... "hasLayout" [1]. Basically for most browsers the #content
divs' left margin of 262px begins at the left edge of the #wrapper
div [2] but for IE this left margin begins at the right edge of the
floated #sidebar div, that why margin:0 brought it close. When the
#content div doesn't have hasLayout IE will behave like the other
browsers.
BTW, the height given to the #footer div is causing text breakout on
text resize. You may want to work with this.
[1] <http://www.satzansatz.de/cssd/onhavinglayout.html>
[2] <http://dev.l-c-n.com/IEW2-bugs/float-layout.php>
Alan
http://css-class.com/
--
Patrick Mattison
p: 310.804.6115
www.liquidscience.net
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE Windows is playing tricks on me!
Thanks Alan! that cleared it up kind of, but now i'm getting a small gap next to the content graphic. It looks as if the background-image: url(Images/content_bg_01.gif); is being cut off on the left side. my initial reaction would be to give it a width but then we go back to the first problem. Any thoughts on why this is happening? http://www.touchmassageboutique.com/ -- Patrick Mattison p: 310.804.6115 www.liquidscience.net __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE Windows is playing tricks on me!
I'm having problems with IE Win rendering my page. Can anyone offer
me a clue???
The whole content section gets bumped below the menu, so i tried
adding a style sheet for IE and added:
#content {margin-left: 0;}
that brought it up to where it's supposed to be except It looks like
the #content area is about 10px to the left.
Any help would be greatly appreciated!
http://www.touchmassageboutique.com/
http://www.touchmassageboutique.com/touchv2.css
--
Patrick Mattison
p: 310.804.6115
www.liquidscience.net
__
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] One Bullet Missing in IE
I'm having a bit of a problem here. For some reason the red square bullet before "About" won't show up in IE, however the bullet for "Career and Education" shows up fine. Any suggestions? Below is the markup and the css: http://www.liquidscience.net/andrew/testercopy.html http://www.liquidscience.net/andrew/ag_style_1.css -- Patrick [EMAIL PROTECTED] __ 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] One Bullet Missing in IE
I'm having a bit of a problem here. For some reason the red square bullet before "About" won't show up in IE, however the bullet for "Personal Bio" shows up fine. Any suggestions? Below is the markup and the css: http://www.liquidscience.net/andrew/testercopy.html http://www.liquidscience.net/andrew/ag_style_1.css -- Patrick [EMAIL PROTECTED] __ 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 Win problem with positioning
I have a problem with IE Win. The content and navbar won't display properly. It looks like the content is displaced by the same amount as the header height. I'm stumped! Can someone please help? http://www.beckyloving.com/ Thanks in advance, -- Patrick __ 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] Layout problems in IE windows
I'm working on my website, using a mac, and when I view it on IE for windows the layout looks screwed up. Also, since I don't have a PC and my Virtual PC stopped connecting to the internet after I installer OS 10.4 it's difficult for me to trouble shoot. I curse IE! If anyone has any suggestions I would appreciate it. Thanks. The website is: www.liquidscience.net -- Patrick Mattison p: 310.804.6115 www.liquidscience.net __ 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] Solved float: left problem in IE Win
Thanks Georg for your suggestion, worked like a charm.
Also, I'm having problems validating the "Directions" page because the
link "Get Directions" has the "&" symbol in the href. W3C says to add
"amp;" after each "&" however when I do this it still won't validate -
has anyone had this problem before? or know of another discussion board
that deals with this?
Thanks
--
Patrick Mattison
p: 310.804.6115
www.LIQU1DSCI3NCE.com
Begin forwarded message:
From: Gunlaug Sørtun <[EMAIL PROTECTED]>
Date: August 29, 2005 10:50:33 AM PDT
To: patrick mattison <[EMAIL PROTECTED]>
Cc: css-d@lists.css-discuss.org
Subject: Re: [css-d] [Repost] float: left problem in IE Win
patrick mattison wrote:
There is a gap between the #sidebar and #container that won’t go away.
http://004bf9e.netsolhost.com
Feed IE/win corrections on both containers, like so:
#sidebar {margin-right: -3px;}
#content {margin-left: 0;}
... using whatever IE/win-only hack you feel comfortable with. I
recommend 'conditional comments'.
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/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] [Repost] float: left problem in IE Win
Hello everyone!
Once again I’m having trouble with IE Windows. Here’s the problem:
When I float the #sidebar left, the container falls bellow the contact
info. But when I leave out the width of the #footer, as it appears now,
the container displays where it should be – well almost. There is a gap
between the #sidebar and #container that won’t go away. At first I
thought it was the “Three-Pixel Gap” so I applied a –3px margin-right
to the #sidebar – didn’t work. I also tried any other fixes I could
find relating to the 3px gap to no avail. So then I decided to try
positioning the #sidebar absolutely, but it extended the container
width by 18px on the right giving the appearance of an 18px right
boarder. I’ve since gone back to # sidebar {float: left} and eliminated
the width of the #footer. If anyone can give me a little direction on
how to eliminate the gap I would appreciate it. I'm supposed to go live
today.
Here is the temp site: http://004bf9e.netsolhost.com
--
Patrick Mattison
p: 310.804.6115
www.LIQU1DSCI3NCE.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] float: left problem in IE Win
Hello everyone!
Once again I’m having trouble with IE Windows. Here’s the problem:
When I float the #sidebar left, the container falls bellow the contact
info. But when I leave out the width of the #footer, as it appears now,
the container displays where it should be – well almost. There is a gap
between the #sidebar and #container that won’t go away. At first I
thought it was the “Three-Pixel Gap” so I applied a –3px margin-right
to the #sidebar – didn’t work. I also tried any other fixes I could
find relating to the 3px gap to no avail. So then I decided to try
positioning the #sidebar absolutely, but it extended the container
width by 18px on the right giving the appearance of an 18px right
boarder. I’ve since gone back to # sidebar {float: left} and eliminated
the width of the #footer.
While I take a break from banging my head on the wall maybe you guys
will have some ideas for me.
Here is the temp site: http://004bf9e.netsolhost.com
--
Patrick Mattison
p: 310.804.6115
www.LIQU1DSCI3NCE.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE offset problem
I'm fairly new to CSS and for the most part I really enjoy it, but I'm having problems with how IE Windows displays the site and I can't figure it out. It seems the #container and #bricks have been offset to the right, each greater then the next. If anyone out there could offer any suggestions I would greatly appreciate it. Also feel free to critique my code since I'm learning and don't want to get off on the wrong foot. http://www.liqu1dsci3nce.com/media_design/home.html thanks, -- Patrick Mattison __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE Win won't display margins correctly
I'm sure this is a common problem but I can't seem to figure it out. in IE for Windows #container and #bricks seem to have an inherent left margin. I tried adding an IE style sheet with negative margins but that didn't work. Also, the #footer margin-top -300 isn't being applied in IE Windows. If anyone could offer a solution or point me to a site that could help me I would appreciate it. here is the test site: www.liqu1dsci3nce.com/media_design/home.html css: http://www.liqu1dsci3nce.com/media_design/mediastyles.css ie css: http://www.liqu1dsci3nce.com/media_design/iestyle.css -- Patrick Mattison -- Patrick Mattison p: 310.804.6115 www.LIQU1DSCI3NCE.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE Win Drawing Problems
Thanks Michael, your solution worked great for IE Win, but now I have
issues with the #textBody displaying at the top of the page in IE Mac.
Any Ideas?
--
Patrick Mattison
Hello, I'm a newbie here and I'm struggling with some IE Win bugs. 1)
the horizontal menu bar in IE Win is off center (it's flushed too far
to the left so that "HOME" hangs almost over the edge) and 2) the
"leather pocket" at the footer doesn't show up at all in IE Win (it
can
be found as the background image for #main, footer_bg_1.jpg) Any help
would be greatly appreciated.
Hi, Patrick,
IE Win has some issues with inline element dimensions. Since the
navigation is absolutely positioned, and no other heights are being
driven by the height of the navigation, you might want to try floating
the list items instead of inlining them.
For the leather pocket issue, IE also has issues with relatively
positioned elements. Basically, IE's presentation is defined by
determining the layout of its elements. Unfortunately, it starts
choking if it can't figure out how elements are layed out after a
certain level. This is commonly referred to by its property name,
"hasLayout" -- you can google it for more information about this. Long
story short, relatively positioning causes more layout issues than
normal. You can solve this partway by giving a height to IE using the
Holly Hack.[1] This gives IE some layout and makes the pocket appear,
but pushes the content underneath the navigation. You can then get
around that by giving the textBody div the same amount of top padding
as the height of the navigation, 42px, again only for IE -- something
like
* html #textBody {
padding-top: 42px;
}
HTH,
Michael
[1] http://www.positioniseverything.net/explorer/escape-floats.html
(scroll down)
--
Patrick Mattison
p: 310.804.6115
www.LIQU1DSCI3NCE.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE Win Drawing Problems
Hello, I'm a newbie here and I'm struggling with some IE Win bugs. 1) the horizontal menu bar in IE Win is off center (it's flushed too far to the left so that "HOME" hangs almost over the edge) and 2) the "leather pocket" at the footer doesn't show up at all in IE Win (it can be found as the background image for #main, footer_bg_1.jpg) Any help would be greatly appreciated. here's the site: http://www.thecooperativemusic.com/ thanks, -- Patrick Mattison p: 310.804.6115 www.LIQU1DSCI3NCE.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Disappears and Reappears in IE
I’ve been working on one of my first CSS/XHTML sites and came across two IE bugs that have been puzzling me. When IE Win displays the home page, the section “join our email list” doesn’t display correctly, it disappears and partially reappears when I scroll back and forth. Also In IE Mac the Margin-Top seems to have collapsed. Here is the site: www.comdeyhideout.com Thanks, -- Patrick Mattison -- Patrick Mattison p: 310.804.6115 www.LIQU1DSCI3NCE.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
