Re: [css-d] Firefox layout issue, works fine in IE7, Safari etc.
Hi Graham,
That's a collapsing margin issue. Adding this:
*{margin-top:0}
into your style sheet. Can't say which element has margining at the
top,
but adding that (generally as the first rule of the style sheet) will
help cure that.
Hi Graham,
Just did some checking and to be a bit more specific, if you put the
margin-top: 0 on the body {} and p {} that solves the problem.
Hopefully that will save you some time.
Mark
__
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] IE6 and IE7 Correct, everyone else wrong with negative margins
Hi all, Ok, I have a problem where IE6 and IE7 are doing what I want, but the rest of the gang (FF, Safari and Chrome) are not doing what I want. Basically, I'm using negative top and bottom margins to move the top and bottom div in on the inner text. Sorry if I'm not explaining this well, but the test page will explain it much better. What's happing in IE6 and IE7 is want I want. But my natural way of thinking is if it works in IE6 and IE7 but not in the others, then I'm doing it wrong. Here's the link: http://dev.tonedeafdesign.com/test/test27.html There are two balloons on the page. The first one is without the negative margins, and you can see why I want to move the text margins, and the second one is my solution that only works in IE6 and IE7. Check it in IE6 and IE7 to see what I want, then in FF, Safari or Chrome to see the problem. The CSS is in the head. Any help is greatly appreciated. Thanks, Mark __ 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] IE6 and IE7 Correct, everyone else wrong with negative margins
Hi Mark, Your HTML has some problems (doesn't validate). Your best bet would probably be to fix those problems first and then try again. HTH Peter Hi Peter, I'm embarrassed. I usually validate all my html. It validates now, but my problem still exists. Again, any help is appreciated. Thanks, Mark __ 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] IE6 and IE7 Correct, everyone else wrong with negative margins
Hi Mark,
You are experiencing collapsing margins, a semi-intended, somewhat
troublesome component of CSS design in compliant browsers.
Adding a small amount of padding or bordering will generally fix
this. Try this rule in your style sheet:
.balloon_middle {
width: 217px;
background: url(images/photo_balloon_middle_bg_slammed.png)
repeat-y;
padding-top: 1px; /* ADD */
padding-bottom: 1px; /* ADD */
}
Hope it helps.
Bill
Hi Bill,
Yep! That did the trick. I've run into this before, but it was a
while back. What is it about adding the padding that does the trick?
Mark
__
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] Flash swf covers DW sprymenu drop downs
On Nov 12, 2008, at 3:46 PM, Barbara Oplinger wrote: Hello, This is my first time with an inquiry. On October 2nd members Jimmy and Lourens had an exchange regarding this issue. Lourens suggested using SWFObject and this apparently solved Jimmy's problem. I too have this problem (on all browsers) and tried the wmode=transparent parameter approach which didn't work - unless I've done something wrong there. I am hoping that Jimmy or someone who's used it before, can explain in easy steps, how to incorporate SWFObject 2.0 into my xhtml page, or do what is necessary with the download. I am not a programmer and feel the need to cry when I try to sort through all the info here http://code.google.com/p/swfobject/wiki/ api . I realize that it involves changing the java srcript embed code, but how do I use this with the SWFObject that I've downloaded. Thank you, Barbara div class=map object classid=clsid:D27CDB6E-AE6D-11cf-96B8-44455354 codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version =9,0,28,0 width=362 height=310 param name=movie value=flash/commPort.swf / param name=quality value=high / param name=wmode value=transparent / embed src=flash/commPort.swf quality=high pluginspage=http://www.adobe.com/shockwave/download/download.cgi? P1_Prod_Version=ShockwaveFlash type=application/x-shockwave-flash width=362 height=310/ embed /object /div Hi Barbara, Try setting the wmode to opaque instead of transparent and see if that does the trick for you. Mark __ 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] Curious why link not working in IE6 IE7
On Sep 21, 2008, at 7:01 PM, Gunlaug Sørtun wrote:
Mark Wheeler wrote:
I have a question that I can't seem to find an answer for. I've
solved the problem, but to be honest, it doesn't seem like a
smooth and logical solution.
Agree, but bugs rarely ever adhere to logic. Humans involved, I guess.
FWIW: you'll find the same non-working link in Opera.
Again, it all works fine with the transparent gif, and I will go with
that, but it just seems extra. I don't think it's necessary, but
I don't know how to make it work any other way.
http://dev.tonedeafdesign.com/test/test25.php
Well, I usually fake a background by declaring something like...
#header2 .frame1 a,
#header2 .frame2 a,
#header2 .frame3 a {
background: url(none);
}
...which doesn't improve on logic but at least solves the problem
in all
affected browsers without having to add anything extra.
regards
Georg
--
http://www.gunlaug.no
Wow. Never thought about that. Didn't even know you get set the
background image to 'none'. Thanks for the tip. This one goes into my
notebook. :)
Thanks again,
Mark
__
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] Curious why link not working in IE6 IE7
Hi, I have a question that I can't seem to find an answer for. I've solved the problem, but to be honest, it doesn't seem like a smooth and logical solution. Here's the thing. There are three photos. Each photo is also a link. Not the actual photo in the code, but a hidden text link. See the code for what I mean. The CSS is in the head of the code. What I had to do to make it work in IE6 and IE7 was to put a transparent gif as a background image for the link. You can see that in header 1. If no background is specified for the link, then the links do not work -- except in IE6 if you hover over the white frame part only. You can see this in header2. If you assign a color for the background, everything works fine, too, as you can see in header3. But this, obviously, is a very undesirable effect. :) Anyway, what I am asking, is why doesn't header2 to work? I've set the link as a block element, assigned it a height and width, I thought that would do it, but apparently not. Again, it all works fine with the transparent gif, and I will go with that, but it just seems extra. I don't think it's necessary, but I don't know how to make it work any other way. Any input would be greatly appreciated. Here's a link to the test page. http://dev.tonedeafdesign.com/test/test25.php Thanks, Mark __ 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] div background issue
On Jun 14, 2008, at 7:22 AM, Duane Nelson wrote: Good morning, all. I'm sure there is a simple fix to my issue, but I've done so many different approaches displays, floats, positions, and margins that I think I've utterly confused myself. Link: http://alansonnazarene.org/index1.html CSS: http://alansonnazarene.org/css/anaz.css Issue Goal: To have a background-color: #e1dcc5 to fill entirely #main which includes #content and #sidebar Presently I'm floating #content to the right. This is where I surrendered to the list. BTW, I know that a fixed width would be a quick solution, but I need it to work with varying content. I'm open to a fix but the best solution would be my preference. Thanks for any help. Duane Nelson Hi Duane, It looks like you need a little float clearing to make that happen. Check out this SitePoint article: http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ Notice the following links within the article: http://www.positioniseverything.net/easyclearing.html and http://www.sitepoint.com/examples/clearing_floats/example2.php The latter one I would try first. And I think that will solve your problem. Just at the overflow: auto (or hidden works, too) and width: 100% to your #main div. Mark __ 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] IE7 png opacity problem
Hi, I'm not sure if my first email got lost, as I never received it, so I'm sending it out again. I apologize if you receive this twice. I can't figure out why IE7 is giving me a blacking out my png image when I assign an opacity value to the div that holds it. Here's a link. The css is in the head of the source. It's easy to see the problem. http://dev.tonedeafdesign.com/test/frame.php It works fine in FF and Safari. Even IE6 behaves (mostly) as I want it to, with the help of the alphaImageLoader. Can anyone explain what is going on here? Thanks, Mark __ 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] IE7 png opacity problem
Hi, I can't figure out why IE7 is giving me a blacking out my png image when I assign an opacity value to the div that holds it. Here's a link. The css is in the head of the source. It's easy to see the problem. http://dev.tonedeafdesign.com/test/frame.php It works fine in FF and Safari. Even IE6 behaves (mostly) as I want it to, with the help of the alphaImageLoader. Can anyone explain what is going on here? Thanks, Mark __ 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] Submit Button Rollover in IE6
Hi all, Thanks for all your suggestions. I'll get to experimenting. :) Mark __ 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] Submit Button Rollover in IE6
Hi,
I have been using the following for my submit button rollover. This
works, obviously, in IE7, FF, Safari, etc. But, is there a way to get
rollovers on submit buttons in IE6, or should I forgo the submit
button and just use a regular a tag to submit the form? Any
suggestions would be appreciated.
---
.submit input {
border: none;
text-indent: -px;
line-height: 0; /* Need this for IE6 */
cursor: pointer;
position: relative; /* Need this for IE6 IE7 inconjuction with the
next hack */
*left: px;
}
.submit input:hover {
background-position: 0 100%;
}
.contact_submit input {
background: url('images/buttons/button_send.gif') no-repeat 0 0;
width: 42px;
height: 16px;
}
div class=submit contact_submit
input type=submit name=send_mail value=Send /
/div
---
Thanks,
Mark
__
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] CSS Image Maps in IE6
On May 24, 2008, at 6:07 AM, maxxu ! wrote: http://maxxu.casacolor.ro/css-exp/css-image-maps.html Hi, No guarantees, but it sticks in my mind that this may be a white space issue. Try putting everything: div id=staticMaps img src=images/manhattan.jpg alt=manhattan flickr style / ul li class=statueLiberty a href=# title=Statue of LibertyStatue of Liberty/a /li li class=Boat a href=# title=Big Boat HereBig Boat Here/a /li /ul /div!-- end #staticMaps -- and make it all on one line: div id=staticMaps img src=images/manhattan.jpg alt=manhattan flickr style /ul li class=statueLiberty a href=# title=Statue of LibertyStatue of Liberty/a /li li class=Boat a href=# title=Big Boat HereBig Boat Here/a / li /ul/div!-- end #staticMaps -- Again, it's just a thought. I think I had something similar happen once. Mark __ 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] Latest Rounded Corners
On May 22, 2008, at 2:21 PM, Chris Akins wrote: I know there are many rounded corner techniques out there, and I'm not looking to start a war. :-) But I was wondering if there are any especially good, newer techniques to the game. I need my rounded box to be resizable, and kind of like the idea of using only one small circle image that gets offset for each corner. Prefer no javascript for this. I did start with Google, but quite a few of the promising link titles lead to pages no longer there, so I hoping this list could point me to recent improvements in this area. Thanks as always for the expertise here. Chris I like this one by Adam Kalsey. http://kalsey.com/2003/07/rounded_corners_in_css/ Mark __ 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 is butchering my pages.
Hi Jess,
It looks like you have a float clearing problem. Here is a link that
gives some good info on how to resolve these issues.
http://www.quirksmode.org/css/clearing.html
In your case there are a couple of things you can do. On your #main
div add an overflow: hidden and a width of 100% such as:
#main {
background-color: #f2e7a7;
padding: 5px;
padding-bottom: 20px;
border: #A09460 solid 1px;
overflow: hidden; /* added this */
width: 100%; /* and this */
}
this is one way but another way might be to use the * hack such as
this. Your #main would remain the same, but add the following just
below it.
#main { background-color: #f2e7a7;
padding: 5px;
padding-bottom: 20px;
border: #A09460 solid 1px; }
* html #main {
height: 1%;
}
OR
* html #main {
zoom: 1;
}
OR
* html #main {
display: inline-block;
}
The * html hack makes it so IE6 will obey any rules set inside the *
html hack.
I hope this info if helpful
Mark
-
On Apr 22, 2008, at 8:23 AM, Jess Jacobs wrote:
Hi all,
A small troubleshooting problem that is driving me CRAZY:
http://www.akisma.com/design/carrot/
Renders fine in every other browser I've checked, but in IE6, the home
page renders fine, aside from a little bordering around the photo that
looks trashy (any suggestions?) but all the other pages get their main
content bounced out of the main div. Any ideas? I've validated,
checked doctypes, etc, but I'm not a master at this and I'm trying to
improve my browser-argument skills. Also, I haven't checked it in IE7
since I don't have a unique copy of windows (I develop on a mac), so
I'm not sure if it's being screwed over there, too.
Any help would appreciated, especially pointers to articles with a
rundown of IE problems in addition to this specific-case advice.
Thanks all!
Jess
--
Jess Jacobs
[EMAIL PROTECTED]
http://www.akisma.com
http://www.myspace.com/akismawins
__
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-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] Site check
If you guys wouldn't mind, could I get a site check on this?
http://www.cgraytaylor.net
It seems to check out okay for me in Firefox, IE 7, and Opera. I had
to lower the font size in the gallery photo descriptions for Opera to
lay out the text correctly which makes it a touch small for my tastes,
but is better than having orphan words. It's my first CSS site, so
some critiques would be much appreciated.
Phoebe
Hi Phoebe,
One quick thing I saw was in the gallery. When the cursor rolls over
the image, there is a slight jump when the the border around the
image changes between 1px and 2px.
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
If you make the white border about the image 2px the jump should
disappear.
.thumbnail img{
border: 2px solid white;
margin: 0 5px 5px 0;
}
Another little thing was (this is simply subjective on my part) the
menu up top. A little more space between each item might be nice.
Right now you have the following:
#slantedmenu ul li{
display: inline;
}
#slantedmenu ul li a{
color: #494949;
padding: 5px 0;
padding-right: 35px;
margin: 0;
text-decoration: none;
background-image: url(graphics/buttons/divider.jpg);
background-repeat: no-repeat;
background-position: right;
}
I would do the following to separate them a bit and make them easier
to read. First, add a margin-right: 30px to the #slantedmenu ul li
as such:
#slantedmenu ul li{
display: inline;
margin-right: 30px;
}
Then shrink the padding-right in #slantedmenu ul li a from 35px to
25px as such:
#slantedmenu ul li a{
color: #494949;
padding: 5px 0;
padding-right: 25px;
margin: 0;
text-decoration: none;
background-image: url(graphics/buttons/divider.jpg);
background-repeat: no-repeat;
background-position: right;
}
You could also combine the padding: 5px 0 and padding-right: 25px
to a single line like this:
padding: 5px 25px 5px 0;
Just a thought. :)
You've done a good job with your first sight. Be encouraged.
Mark
__
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] IE6 and absolutely positioned divs not being contained in the wrapping div
Besides your above fix, Is there any other way, or is that my only option? I'm sure there are, but you may have to rebuild your entire case more or less from scratch to avoid IE6' standard mode bugs without disturbing better browsers/versions. Someone else may chime in with a solution for IE6 in standard mode, or else I'll have a second look at your case as soon as I can find the time, and see if it can't be made to work in a mode-independent way. Hi Georg, Thanks for the input. I think I'll keep noodleing around with other ways of doing it. If you do happen to come across some spare time, I'd appreciate any ideas you might have to come up with a mode- independent way. Thanks, Mark __ 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] IE6 and absolutely positioned divs not being contained in the wrapping div
Hi, I have a problem with IE6 not rendering as expected, or at least as I want it to. Go figure. It works fine in IE7, FF and Safari. Here is the test page. http://dev.tonedeafdesign.com/test/wrap_div.html The css is in the head of the page. I've put in a background color for each of the divs so it's easier to see where they line up with each other, although you can't see them in IE6 because of the png rendering problem in IE6. (That was helpful, wasn't it.) It looks like to me that #div1 is expanding to the size of the graphic - Vertically. Why it doesn't have a problem horizontally, I don't know. It's the vertical that seems to be the problem. As well, #div4 seems to have disappeared completely. I thought that the overflow:hidden would have stopped things from extending, but that doesn't seem to work in IE6. I've looked at the different IE6 bugs and can't seem to pinpoint if that is a problem. Any help would be greatly appreciated. Thanks, Mark __ 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] Footer not staying at bottom of window... Sort of
Hi, I've run across something I would never have expected. When viewing the following page, the footer (absolutely positioned) does not stick to the bottom of the view port. This only happens in Safari when making the window larger and ONLY when making it larger in a perfect vertical movement. If you move horizontally in any direction, the footer snaps to the bottom. As well, after resizing the window vertically, if you roll over a link in the nav bar at the top, the footer snaps into place. Here are the links: http://dev.tonedeafdesign.com/ob/index.php http://dev.tonedeafdesign.com/ob/css/global.css I've used the Footer Stick Alt from the man in blue (http:// www.themaninblue.com/experiment/footerStickAlt/) as the basis for this layout. Any help would be very appreciated. Thank you very much. Mark Wheeler __ 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] Border-bottom not seen in IE7 on hover link
You could try giving position:relative to the LI, this usually stops (in IE) cut-off of contents going outside their containers. -- Bruno Fassino http://www.brunildo.org/test Hi Bruno, Yep, that did it. Thanks. It's weird that it only did it in IE7 only, though. Oh well. Mark __ 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] Border-bottom not seen in IE7 on hover link
Hi,
To fix the height of the li tags, display:block and float:left :
#nav ul li {
display: block; /* changed */
float:left; /* changed */
margin-right: 5px; /* added */
padding-right: 20px;
border: 1px solid yellow;
}
Then to have it centered, you would need a width for the UL :
#nav ul {
margin:0 auto; /* changed */
padding:0;
list-style-type: none;
width:800px; /* added */
}
Hope this helps.
Hi Phillip,
Sorry, but that put everything in a vertical centered list.
Mark
__
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] Border-bottom not seen in IE7 on hover link
On Aug 2, 2007, at 11:16 AM, Phillip Allard wrote: Here's the sample: http://www.bossanoza.net/_external/css-d/ underline_link_test.html (works for me on IE7 (vista), FF and IE6 (xp)) Hi Phillip, Yeah! That worked great. Thanks very much. Mark __ 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] No brainer with margin/padding
Good evening list, This has got to be a no-brainer but i can't get my hands on it: i've got a customed error page where the margin/padding is driving me nuts. the h1 holds the warning: Error 403: Forbidden Access forbidden to remote server The goal is to have Error 403: sitting flush to the left of the container and to have Forbidden Access forbidden to remote server flush to the right of the container. Error 403: has a class with a float: left. This of course does the trick but i was trying to get the same effect without float, just by using marging/padding but that doesn't fall to well... trying several values i couldn't get it aligned like i want. http://www.dzinelabs.com/projects/MPT/Pages/error http://www.dzinelabs.com/Stylesheets/error -- Best regards, Luc Hi Luc, (sorry if this is a double post - I didn't see it post even though I saw others come in after I sent mine earlier.) From initial looking, get rid of the margin-left: -100px (this looked like a fix of some sort for your problem) in .text. Next, in your h1, you have: padding: 20px 10px 15px 5em; Notice the right side is set to 5em. I think that is where your problem really is. Set that to 0: padding: 20px 10px 15px 0; That should fix it. Mark __ 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] No brainer with margin/padding
Good evening list, This has got to be a no-brainer but i can't get my hands on it: i've got a customed error page where the margin/padding is driving me nuts. the h1 holds the warning: Error 403: Forbidden Access forbidden to remote server The goal is to have Error 403: sitting flush to the left of the container and to have Forbidden Access forbidden to remote server flush to the right of the container. Error 403: has a class with a float: left. This of course does the trick but i was trying to get the same effect without float, just by using marging/padding but that doesn't fall to well... trying several values i couldn't get it aligned like i want. http://www.dzinelabs.com/projects/MPT/Pages/error http://www.dzinelabs.com/Stylesheets/error -- Best regards, Luc Hi Luc, From initial looking, get rid of the margin-left: -100px (this looked like a fix of some sort for your problem) in .text. Next, in your h1, you have: padding: 20px 10px 15px 5em; Notice the right side is set to 5em. I think that is where your problem really is. Set that to 0: padding: 20px 10px 15px 0; That should fix it. Mark __ 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] Border-bottom not seen in IE7 on hover link
Hi, I've come across this little problem before, and worked around it last time, but I don't want to work around it anymore. The problem is that I have border-bottom to appear on hover over a link. But, that is not appearing - it seems to be cut off - in IE7. You can see the yellow border around the li tag is cut off at the bottom. IE6, FF, Safari are all fine, just IE7 is the problem. I think I'm missing some basic thing here, but I can't seem to figure it out. Here's the link: http://dev.tonedeafdesign.com/ob/underline_link_test.html Any help would be appreciated. Thanks, Mark __ 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] Missing Div!
Hey all, I'm having a mind block on this embarrassingly simple problem. I've got two divs, one should hold text below the other, header, div; but the text just seems to disappear? I'm guessing it must have something to do with the fact that the header is positioned *absolutely* - but if not then the whole thing looks wrong?! http://www.henryfelton.co.uk/css/header.html Thanks, Henry Hi Henry, Your are correct in the absolute positioning of the header. Because of that the text is hidden behind the banner. For a quick fix, if you add a padding-top: 120px, your text should pop out, as it's pushed below the header, like this: div style=padding-top: 120px; phello/p /div Mark __ 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] 3 pixels of space problem - clearing problem
Hi all, I'm continuing to work on my first liquid layout. On to the next problem which I thought (think?) was a 3px IE6 problem, but I tried to apply some 3px fixes, but was not successful. Here are the links: http://dev.tonedeafdesign.com/ob/test.html http://dev.tonedeafdesign.com/ob/css/global.css I've put in some commented-out borders and padding to perhaps help with solving the problem. Uncomment them if you need them. The problem is mostly in IE6. FF and Safari look good and IE7 looks good with one problem. In IE6 there is a three pixel gap in two places - between #right_column and left_wrap, and the other is between #nav_left_corner and #nav. Both #right_column and #nav_left_corner are floated divs. I thought it might be a Has Layout trigger with some of these layers, but adding a hight: 1% didn't seem to work. Perhaps I was not triggering in the correct place. The last problem, which can be seen in IE6 and IE7 is that #left_column is not clearing the #nav_left_corner div that is above it. Thus it is pushed to the right. I'm pretty confused on that one two. Any help would be greatly appreciated. Thanks very much, Mark __ 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] Site check please
On Jul 11, 2007, at 9:20 AM, Gary Benson wrote: Hi all, Could I trouble you for site check of http://www.relaxshiatsu.co.uk/ please? I use Firefox on Linux so Windows and Mac checks are especially welcome, as are any general comments and suggestions you may have. If it helps, this is what I see when I look at it: http://www.relaxshiatsu.co.uk/links/70f13fd1.png Thanks in advance, Gary -- Bath shiatsu -- http://www.relaxshiatsu.co.uk/ __ 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/ Hi Gary, It looks good in FF 2.0.0.4 (Mac) and Safari 2.0.4. Nice and clean. Mark __ 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] Site check please
Hi all, Could I trouble you for site check of http://www.relaxshiatsu.co.uk/ please? I use Firefox on Linux so Windows and Mac checks are especially welcome, as are any general comments and suggestions you may have. If it helps, this is what I see when I look at it: http://www.relaxshiatsu.co.uk/links/70f13fd1.png Thanks in advance, Gary Hi Gary, After seeing the IE6 photos, it looks like you are battling the .png transparency problem in IE6. Have a look at google with: png internet explorer transparency That ought to get you started. Mark __ 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] Problem with paragraphs and headers
Hi all,
I'm trying my first liquid layout and have run into a couple of
snags. Forgive me if I'm totally going about this the wrong way, but
I had to start somewhere. First, here are the links:
http://dev.tonedeafdesign.com/ob/test.html
http://dev.tonedeafdesign.com/ob/css/global.css
The problem is that there is a space above and below my #main_content
div when I place a p or an h1,2,3 tag in the first or last part
of the content. This is happening in IE6, IE7, FF and Safari. The
weird thing is when place a visible border around #main_content, that
all goes away and things act as I expected. So what am I missing
here? Below is the css for the #main_content div. Uncomment the
border to see what I mean.
#main_content {
/* border: 1px solid red;*/
margin-left: 170px;
line-height: 150%;
}
Any help is appreciated.
Thanks,
Mark
__
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] Problem with paragraphs and headers
Hi David,
Thanks for the education. I just googled it and came across this link:
http://www.communitymx.com/abstract.cfm?cid=CB7B3
Thanks for the push in the right direction. I've made the changes to
css file. You can see the changes now.
http://dev.tonedeafdesign.com/ob/test.html
http://dev.tonedeafdesign.com/ob/css/global.css
I just added:
p, h1, h2, h3 {
margin: 0;
padding: 5px 0;
}
And that tightened everything up.
Thanks again,
Mark
--
On Jul 9, 2007, at 6:24 PM, David Hucklesby wrote:
On Mon, 9 Jul 2007 11:17:05 -0700, Mark Wheeler wrote:
Hi all,
I'm trying my first liquid layout and have run into a couple of
snags. Forgive me if
I'm totally going about this the wrong way, but I had to start
somewhere. First, here
are the links:
http://dev.tonedeafdesign.com/ob/test.html
http://dev.tonedeafdesign.com/ob/css/global.css
The problem is that there is a space above and below my
#main_content div when I place
a p or an h1,2,3 tag in the first or last part of the
content. This is happening
in IE6, IE7, FF and Safari. The weird thing is when place a
visible border around
#main_content, that all goes away and things act as I expected. So
what am I missing
here? Below is the css for the #main_content div. Uncomment the
border to see what I
mean.
I think you are referring to escaping margins.
Google css escaping margins for an explanation.
Basically, the top and bottom margins of your Hn or P elements
escape through the top and bottom of your DIV. Adding a border
or padding to the top and bottom of your DIV will block them.
Cordially,
David
--
__
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] Problem with paragraphs and headers
Hi All,
I just changed it from what I just said to adding a:
padding: 1px 0; /* This is needed to get rid of the escaping
margins. Just add a 1px padding-top and padding-bottom to the div.*/
to the #main_content div. This seemed a bit cleaner and allows me a
bit more flexibility with my P and Hn rules.
Thanks again.
Mark
-
On Jul 9, 2007, at 6:54 PM, Mark Wheeler wrote:
Hi David,
Thanks for the education. I just googled it and came across this link:
http://www.communitymx.com/abstract.cfm?cid=CB7B3
Thanks for the push in the right direction. I've made the changes to
css file. You can see the changes now.
http://dev.tonedeafdesign.com/ob/test.html
http://dev.tonedeafdesign.com/ob/css/global.css
I just added:
p, h1, h2, h3 {
margin: 0;
padding: 5px 0;
}
And that tightened everything up.
Thanks again,
Mark
--
On Jul 9, 2007, at 6:24 PM, David Hucklesby wrote:
On Mon, 9 Jul 2007 11:17:05 -0700, Mark Wheeler wrote:
Hi all,
I'm trying my first liquid layout and have run into a couple of
snags. Forgive me if
I'm totally going about this the wrong way, but I had to start
somewhere. First, here
are the links:
http://dev.tonedeafdesign.com/ob/test.html
http://dev.tonedeafdesign.com/ob/css/global.css
The problem is that there is a space above and below my
#main_content div when I place
a p or an h1,2,3 tag in the first or last part of the
content. This is happening
in IE6, IE7, FF and Safari. The weird thing is when place a
visible border around
#main_content, that all goes away and things act as I expected. So
what am I missing
here? Below is the css for the #main_content div. Uncomment the
border to see what I
mean.
I think you are referring to escaping margins.
Google css escaping margins for an explanation.
Basically, the top and bottom margins of your Hn or P elements
escape through the top and bottom of your DIV. Adding a border
or padding to the top and bottom of your DIV will block them.
Cordially,
David
--
__
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] Div overflow not being seen in IE6
Hi, I have a div (#links_corner), floated left, negatively positioned, with a background image in it that is not showing up outside it's container div (#links_title). This happens when there is no width set on the container div. But when I set a width to the container div (which of course is what I want), the overflow part of the floated, negatively positioned div does not show up. It's fine in FF, IE7 and Safari, but not in IE6. Here is link. http://www.tonedeafstudios.com/test/cornertest.html Any help would be appreciated. Thanks, Mark __ 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] Div overflow not being seen in IE6
On Feb 5, 2007, at 5:41 PM, Gunlaug Sørtun wrote:
Mark Wheeler wrote:
http://www.tonedeafstudios.com/test/cornertest.html
Try adding...
#links_corner { position: relative;}
...so IE gets the stacking right.
regards
Georg
--
http://www.gunlaug.no
LOL. OK... 2 months ago, to the day, you answered a different
question with the same answer - TO ME. I feel like an idiot. If I
could just retain this information and pull it out when I need it!
Thank you, thank you, thank you. I see your name pop up a lot on this
list. You are a very integral part of this community and at least for
myself, and I'm sure the many others you have helped, are/am very
grateful for you time. Thanks again.
Mark
__
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] Image border problem in IE6
Hi, I have an image border that is loosing it's padding in IE6. IE7, FF and Safari (although, there is another problem there, but that's for a different list... I think) are fine. There should be a 2px padding around the thumbnails, whether they are selected, hovered or not hovered. I can't seem to figure this one out. Here's the link: Page: http://ncp.tonedeafstudios.com/photo_gallery3.php CSS: http://ncp.tonedeafstudios.com/css/gallery.css The div and classes inquestion are: #tn .tn_pic Thanks for your help, Mark __ 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] [SOLVED] 3 pixel gap in IE I can't figure this one out
On Jan 2, 2007, at 11:50 AM, Mark Wheeler wrote: Hi all, Happy New Year... now back to work. :) I've run across a 3 pixel IE bug(?) I can't seem to squash. It comes between the #left_container (float: left) and the #main_content. It only shows up in IE6 (I haven't checked IE7 yet) - FF and Safari are fine. What I noticed was that the inline graphic: img src=images/header_bird_bottom.jpg alt= width=171 height=93 / seems to be pushing the content away from it's right and bottom. I can't confirm that, it just looks like that in IE6. I didn't notice the problem until I was working on the photo gallery page when a right-floated div pushed the non-floated content below the float. I thought I had the widths correct, and when I was checking that I noticed the above problem. So I'm hoping that fixing the above problem will fix the other - but maybe not. But at least we can start there. Here are the links to the photo gallery page (the other links will take you to other pages that show the same problem). http://ncp.tonedeafstudios.com/photo_gallery.php http://ncp.tonedeafstudios.com/css/global.css http://ncp.tonedeafstudios.com/css/gallery.css This, I thought, was a more simple layout. I never expected this problem. Thanks very much for you help. Mark Hi All, Never mind. I figured out which 3px bug it was and fixed it. Had to put the non floated div (#main_content) margin to 0 and a -3px to the floated left column. Mark __ 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] list
On Jan 1, 2007, at 11:30 AM, Marjo wrote: Worth reading for me: CSS; the missing manual by Mc Farland. I second that. I'm two-thirds through the book, and am loving it! Mark __ 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] 3 pixel gap in IE I can't figure this one out
Hi all, Happy New Year... now back to work. :) I've run across a 3 pixel IE bug(?) I can't seem to squash. It comes between the #left_container (float: left) and the #main_content. It only shows up in IE6 (I haven't checked IE7 yet) - FF and Safari are fine. What I noticed was that the inline graphic: img src=images/header_bird_bottom.jpg alt= width=171 height=93 / seems to be pushing the content away from it's right and bottom. I can't confirm that, it just looks like that in IE6. I didn't notice the problem until I was working on the photo gallery page when a right-floated div pushed the non-floated content below the float. I thought I had the widths correct, and when I was checking that I noticed the above problem. So I'm hoping that fixing the above problem will fix the other - but maybe not. But at least we can start there. Here are the links to the photo gallery page (the other links will take you to other pages that show the same problem). http://ncp.tonedeafstudios.com/photo_gallery.php http://ncp.tonedeafstudios.com/css/global.css http://ncp.tonedeafstudios.com/css/gallery.css This, I thought, was a more simple layout. I never expected this problem. Thanks very much for you help. Mark __ 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] Circle Navigation
Hi Martin, It's not an all CSS solution, but you could incorporate a little javascript (innerHTML aught to do it) and that might solve you problem. Mark -- On Dec 26, 2006, at 12:28 PM, Martin Davis wrote: Hey all, So I'm trying to make a new website today and I have this crazy idea of using a circle navigation. I've searched around but can not find any examples, only some product running rampant around the web. I'm all for using pre-packaged stuff, but I feel like I'm missing something simple and I almost have it working. The idea is to have an outline of a circle with icons on the edge of it. When a user scrolls over the icon, the text appears in the middle of the circle. Even though my div #nav is acting as a containing div for the icons, I can't seem to get the text to see the div #nav as a container. Any ideas? http://dev.martinhdavisiii.com/ The nav is in the top right. Happy New Years, Martin __ 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/
Re: [css-d] [SOLVED] Extra width in IE6 drop down menus
On Dec 8, 2006, at 6:28 AM, Devon Miller wrote: Here's the fix and how I went about tracking it down: 1) Fire up ProgramsAccessoriesAccessibilityMagnifier so we can see what happens With this I can see that IE6/7 is adding an extra band of color below the white line between items. This extra color line extends into the left dark orange border as well. 2) Change colors: First, I changed each instance of background and border colors to transparent, then assigned them new, distinct colors one by one. In doing so I found that the extra band of color is the LI background color and If I set a background color on the anchor it does *not* replaces the band. I change colors like this so I can remember the original values: Before:background: 1px solid #CF7103; After: background: 1px solid transparent; #CF7103; or After: background: 1px solid red; #CF7103; Like this the CSS is non-validating, but (so far) all the browsers just ignore the stray #CF7103 without a property name (probably see it as an id without an accompanying block). Later, I'll come back and remove the red; to restore the original color. 3) Check for positioning. Positioning the A absolute or relative to LI could be causing a misalignment. No, the only things positioned are the #wrapper and the inner UL. Ok, now from this I know that the LI background is showing up below the white border, so the white border must be *inside* the LI. The color band also undercuts the thick left border, so that also must be *inside* the LI. Sure enough, the white border (actually #eee) and 5px left border are set on the anchor. 4) Playing with properties. The borders were applied to #nav li ul a, so lets move these up 1 level. So they will be applied to #nav li li. That looks better. 5) Restore original colors. Voila! dcm Fantastic! Solved. Thank you so much for taking the time to help me out. It certainly was an education. I didn't even know you could look at pages that way, using the Maginifier. Neat. Thank you so very much, again. Mark __ 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] Extra width in IE6 drop down menus
On Dec 7, 2006, at 8:56 AM, Devon Miller wrote: Ok this seems to work for me in FF1.5, IE6, and IE7. These changes remove the need for some of the width restrictions by setting white-space to nowrap for anchors and by disabling width and float for the inner LI elements. #nav a add 'white-space: nowrap remove the width settings #nav li ul delete height and width settings #nav li li delete padding-right and width add float: none !important add width: auto !important #nav li ul ul delete margin settings dcm Hi Devon, Thanks very much. That got rid of that extra space to the right. But... now in IE6 and IE7, the left 5px border and 1px white border- bottom on the inner LI elements are slightly off by about 2 pixels. I fixed IE7 by removing the width settings and adding the white-space: nowrap to the #nav li ul a section, but it really messed up IE6. Looks like and extra carriage return was added. (I've removed my little addition and it's now as you've suggested) Any other ideas as to why the extra space is there in the inner LI elements? I'm still so new to this. Thanks for your help. http://pws.tonedeafstudios.com/ http://pws.tonedeafstudios.com/css/global.css Mark __ 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] [SOLVED] Div mostly disappears when adding a span tag in IE7
On Dec 6, 2006, at 7:02 AM, Devon Miller wrote: Now, I'll admit I'm not clear why this works, but adding: display: inline-block to .names seems to do the trick. dcm Hi Devon, Yep, you're right. That did the trick. Andy like you said... I can't get my head around that one. I wouldn't have even thought to try it. Anyone have an idea as to WHY this works? Thanks for you help. Mark __ 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] Extra width in IE6 drop down menus
Hi, I'm just full of questions these days. I'm using drop down menus for the first time and am using the son of suckerfish. Everything works great in IE7, FF, Safari, except that in IE6 I've got some extra width on the drop down and in the main nav bar. I originally thought it was the double margin bug, but after applying the display: inline to my two floats, it didn't help, so I'm a little lost. Here is the site link. SITE and CSS (in the document): http://pws.tonedeafstudios.com/ Any help is greatly appreciated. Thanks, Mark __ 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] Extra width in IE6 drop down menus
On Dec 6, 2006, at 1:26 PM, Devon Miller wrote Try removing the 1em of right padding in #nav li li dcm Hi Devon, Well, that fixed the extra padding on the dropdown, but now the hover (a:hover) length is of by 1em in FF. As well, the extra padding in the main nav is still there in IE6, but not in IE7 of FF. So it's as if IE6 is adding and extra 1em to all li's. SITE and CSS: http://pws.tonedeafstudios.com/ Mark __ 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] Extra width in IE6 drop down menus
Hi, I'm just full of questions these days. I'm using drop down menus for the first time and am using the son of suckerfish. Everything works great in IE7, FF, Safari, except that in IE6 I've got some extra width on the drop down and in the main nav bar. I originally thought it was the double margin bug, but after applying the display: inline to my two floats, it didn't help, so I'm a little lost. Here is the site link. Hi, This is just a directory update for the same probelem. Haven't been able to solve it yet. SITE: http://pws.tonedeafstudios.com/ CSS: http://pws.tonedeafstudios.com/css/global.css The problem still exists. The css is now all in an external file. Any help is greatly appreciated. Thanks. Mark __ 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] Div mostly disappears when adding a span tag in IE7
Hi, I have a problem in IE7. Believe it or not, IE6 is fine on this one. :) Here's the problem. I have a floated (right) div and then text on the left (not floated). I've surrounded the text in a single span tag (.names) so as to set everything in the text to italic. Works great except in IE7, where the floated div (#info_box - floated right) partially (mostly) disappears. I even tried to span each individual short line of text with italics and had the same problem. This makes no sense, and was the last think I expected. Any help would be greatly appreciated. here's the links. Site: http://ncp.tonedeafstudios.com/board_members.php CSS: http://ncp.tonedeafstudios.com/css/board_members.css Thanks very much, Mark __ 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] Image cut off in IE6
On Dec 5, 2006, at 9:33 AM, Gunlaug Sørtun wrote:
Old IE doesn't get the stacking right over the edge of a container.
Add...
.title_image {position: relative;}
...to fix that old bugger.
regards
Georg
Hi Georg,
That fixed it. Thanks very much. Is there a specific IE bug I can
attribute this too for future reference?
Thanks again. One down one to go.
Mark
__
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] IE7 - no bold text in unordered list
Hi, I have a navigation menu that looks as it should in IE6, FF, and Safari, but IE7 does not bold the text on non hover. I can't figure it out. Anyone have an idea? Here are the links. Site: http://ncp.tonedeafstudios.com/ CSS: http://ncp.tonedeafstudios.com/css/global.css Thanks, Mark __ 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] IE7 - no bold text in unordered list
On Dec 4, 2006, at 9:57 AM, Gunlaug Sørtun wrote: Just a guess, since I don't have IE7 installed... I think 'a:link' trumps '#nav_container ul li a', the way IE7 works. If so, then changing the last one to '#nav_container ul li a:link' should work. Hi Greg, Tried that. Didn't work. I even tried changing the initial 'a:link' to bold and THAT didn't work. I'm really confused on this one. Site: http://ncp.tonedeafstudios.com/ CSS: http://ncp.tonedeafstudios.com/css/global.css Any other ideas? Thanks, Mark __ 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] IE7 - no bold text in unordered list
On Dec 4, 2006, at 2:53 PM, David Hucklesby wrote: Hi Mark, Did you fix this? The menu text looks bold in IE 7 here. But it's hard to tell with the text size even smaller than the browser's own menu. Cordially, David -- www.hucklesby.com Hi David, No I didn't. I see it in IE6 and FF as bold, but not in IE7. Also, you mentioned it's hard to tell with the text size even smaller than the browser's own menu. I don't understand that. How small are you seeing it? Site: http://ncp.tonedeafstudios.com/ CSS: http://ncp.tonedeafstudios.com/css/global.css Thanks, Mark __ 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] IE7 - [SOLVED] no bold text in unordered list
On Dec 4, 2006, at 5:15 PM, Steven Tchorzewski wrote:
Mark,
I think I may know your problem have your solution:
You set: font-weight: normal; and IE7 must be getting stuck on that.
a:hover, a:active {
color: #006595;
text-decoration: underline;
font-weight: normal;
}
You do use the ID #active in an LI of your left navigation bar where
we are experiencing the font weight discrepancy in IE7.
I am not sure exactly how but, I will bet there in lies your problem
and if you play with these settings you will figure it out probably.
Regards,
Steve Tchorzewski
(Some Div Dropdowns)
http://www.plattdaddy.com/rollovers/easy-css-java-drop.htm
Hi Steve (and anyone else who might be reading this),
I figured it out. Just for kicks, I took off the bold for the link
and low and behold, the black link text (non hover) actually got
lighter/less dense! It was working all along. It seems that IE7's
bold black text is just baaarrrllly bold. So I guess that's just
the way it is. Anyway, that's what I found out. Thanks to all your help.
Mark
p.s. On to the next problem... :)
__
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] IE7 - [SOLVED] no bold text in unordered list
On Dec 4, 2006, at 8:32 PM, Michael Stevens wrote: As a few of us talked about in a past thread typically fonts usually only have two weights: normal bold. Some will have more than that but in those instances you can't bbbcontent/b/b/b to make it bolder. If a font has multiple weights, like Futura, you'll have Futura and Futura, Bold. If you want it bolder you need to use FuturaMedium, FuturaMedium, Bold or FuturaHeavy. Mike Hi Mike, Makes sense, but why is it then on my page that in FF (PC) and IE6 it looks bolder/heaver than in IE7? Mark __ 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] IE7 - [SOLVED] no bold text in unordered list
On Dec 4, 2006, at 9:46 PM, Philippe Wittenbergh wrote: It is a bit more complicated. Most browsers on Windows will attempt to find a bold face for the specified font. If not available, they will using some algorithms to artificially bold the specified font. On Mac Safari, and in the future Gecko, the browser will look first for a bold face in the specified font-family, lacking that, they will look for a substitute font eventually, or eventually artificially bold out the font-face. The same goes for italics. What IE 7 does, I'm not sure yet. Maybe the font-smoothing that is turned on by default doesn't work all that well, and the bolding is not visually different from the normal font-weight. Philippe Must be. I think I will do a quick test in basic html. Set the font and show bold and normal settings and see what they look like in IE6 and IE7. Mark __ 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] Floats not floating in IE
Hi all,
So in my quest to use less absolute positioning (why, because I
wanted to try it.) I've come up against some floats not floating next
to each other. I've written a short test page here, and the css is in
page.
http://www.tonedeafstudios.com/test/test21.html
And here is the very short code.
CODE--
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
titleUntitled/title
style type=text/css title=text/css
/* ![CDATA[ */
html, body {
padding: 0;
margin: 0;
}
body {
font-size: 12px;
font-family: Trebuchet MS, Gill Sans, Verdana, Tahoma, sans-serif;
line-height: 150%;
color: #000;
background-color: #292b68;
min-width: 775px;
text-align: center;
}
#wrapper {
text-align: left;
margin-right: auto;
margin-left: auto;
position: relative;
width: 775px;
}
#header_left {
float: left;
background-color: green;
width: 171px;
height: 168px;
}
#header_right {
background-color: red;
width: 604px;
height: 168px;
margin-left: 171px;
}
/* ]] */
/style
/head
body
div id=wrapper
div id=header_left/div
div id=header_right/div
/div
/body
/html
/CODE-
It's one div floated left against another div, but in IE6 it floats
the div left, but then the adjacent div is kitty-corner to floated
div. I'm sure there is a bug in IE regarding this, but I've looked
and can't seem to find it.
The two divs have stated heights and widths and are enclosed in a
wrapper to center the whole thing on the page.
Any help would be great.
Thanks,
Mark
__
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] Floats not floating in IE
Hi Andy,
Thanks for the reply. I've taken away the width attribute for
#header_right, and that brings the div back up, but now there is a
small break between the two divs. They should be flush. Is that where
the negative margin comes in on #header_left? I tried putting in a
-1px and -3px margin-right on #header_left, but it didn't help? What
am I missing here?
Thanks,
Mark
---
On Nov 29, 2006, at 10:18 AM, Andy Pemberton wrote:
Mark:
This is quite an interesting case. Aparrently, applying hasLayout
to the #header_right element is causing a rendering bug in IE that
is adding extra space between the #header_left and #header_right
elements. See the reference below for a description of hasLayout
and its effects in IE.
So, to solve this issue, you have two options:
1. Remove the style properties that are giving the element hasLayout
Width and height both trigger hasLayout in IE and in this
case, width is not necessary as your DIV is a block level element
that will automatically fill the remaining (604) pixels. So remove
both to prevent this issue. If it is absolutely necessary to define
the height, use the 2nd solution below.
2. Add a negative right margin to the #header_left element
This will cause the #header_right element to occupy the space
removed by the negative margin from the #header_left element.
However, there is a margin-left on the #header_right element which
will cause the right container to be displayed to the right of the
left container.
So your style for the #header_right element should look like this:
#header_right {
background-color: red;
height: 168px;
margin-left: 171px;
}
I've tested this solution in: FF2, IE (7,6,5.5), Safari 2.0, Opera 9
PS: This technique of using negative margins is something I've used
to combat the float-drop problem often encountered in IE (see
reference below).
References:
- http://www.positioniseverything.net/explorer/expandingboxbug.html
- http://www.satzansatz.de/cssd/onhavinglayout.html
On 11/29/06, Mark Wheeler [EMAIL PROTECTED] wrote:
Hi all,
So in my quest to use less absolute positioning (why, because I
wanted to try it.) I've come up against some floats not floating next
to each other. I've written a short test page here, and the css is in
page.
http://www.tonedeafstudios.com/test/test21.html
And here is the very short code.
CODE--
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml;
head
titleUntitled/title
style type=text/css title=text/css
/* ![CDATA[ */
html, body {
padding: 0;
margin: 0;
}
body {
font-size: 12px;
font-family: Trebuchet MS, Gill Sans, Verdana, Tahoma,
sans-serif;
line-height: 150%;
color: #000;
background-color: #292b68;
min-width: 775px;
text-align: center;
}
#wrapper {
text-align: left;
margin-right: auto;
margin-left: auto;
position: relative;
width: 775px;
}
#header_left {
float: left;
background-color: green;
width: 171px;
height: 168px;
}
#header_right {
background-color: red;
width: 604px;
height: 168px;
margin-left: 171px;
}
/* ]] */
/style
/head
body
div id=wrapper
div id=header_left/div
div id=header_right/div
/div
/body
/html
/CODE-
It's one div floated left against another div, but in IE6 it floats
the div left, but then the adjacent div is kitty-corner to floated
div. I'm sure there is a bug in IE regarding this, but I've looked
and can't seem to find it.
The two divs have stated heights and widths and are enclosed in a
wrapper to center the whole thing on the page.
Any help would be great.
Thanks,
Mark
__
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/
Re: [css-d] Floats not floating in IE
Hi Andy,
Ok, I'm completely lost now. I'm sorry I'm not getting this. Here is
what I have for #header_right and #header_left;
#header_left {
float: left;
background-color: green;
width: 171px;
height: 168px;
}
#header_right {
background-color: red;
/* width: 604px;*/
height: 168px;
margin-left: 171px;
margin-right: -171px;
}
That produces no change in IE, still the small gap, and FF now makes
#header_right even longer. I'm sure your right in what you are
explaining, but I'm not getting it.
Mark
-
On Nov 29, 2006, at 12:46 PM, Andy Pemberton wrote:
Mark:
Add a negative margin equal to the width of the element. For
example, in your case, add margin-right:-171px to header_right.
Andy
On 11/29/06, Mark Wheeler [EMAIL PROTECTED] wrote:
Hi Andy,
Thanks for the reply. I've taken away the width attribute for
#header_right, and that brings the div back up, but now there is a
small break between the two divs. They should be flush. Is that
where the negative margin comes in on #header_left? I tried putting
in a -1px and -3px margin-right on #header_left, but it didn't
help? What am I missing here?
Thanks,
Mark
---
On Nov 29, 2006, at 10:18 AM, Andy Pemberton wrote:
Mark:
This is quite an interesting case. Aparrently, applying
hasLayout to the #header_right element is causing a rendering
bug in IE that is adding extra space between the #header_left and
#header_right elements. See the reference below for a description
of hasLayout and its effects in IE.
So, to solve this issue, you have two options:
1. Remove the style properties that are giving the element
hasLayout
Width and height both trigger hasLayout in IE and in this
case, width is not necessary as your DIV is a block level element
that will automatically fill the remaining (604) pixels. So remove
both to prevent this issue. If it is absolutely necessary to
define the height, use the 2nd solution below.
2. Add a negative right margin to the #header_left element
This will cause the #header_right element to occupy the space
removed by the negative margin from the #header_left element.
However, there is a margin-left on the #header_right element which
will cause the right container to be displayed to the right of the
left container.
So your style for the #header_right element should look like this:
#header_right {
background-color: red;
height: 168px;
margin-left: 171px;
}
I've tested this solution in: FF2, IE (7,6,5.5), Safari 2.0, Opera 9
PS: This technique of using negative margins is something I've
used to combat the float-drop problem often encountered in IE (see
reference below).
References:
- http://www.positioniseverything.net/explorer/expandingboxbug.html
- http://www.satzansatz.de/cssd/onhavinglayout.html
On 11/29/06, Mark Wheeler [EMAIL PROTECTED] wrote:
Hi all,
So in my quest to use less absolute positioning (why, because I
wanted to try it.) I've come up against some floats not floating next
to each other. I've written a short test page here, and the css is in
page.
http://www.tonedeafstudios.com/test/test21.html
And here is the very short code.
CODE--
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml;
head
titleUntitled/title
style type=text/css title=text/css
/* ![CDATA[ */
html, body {
padding: 0;
margin: 0;
}
body {
font-size: 12px;
font-family: Trebuchet MS, Gill Sans, Verdana, Tahoma,
sans-serif;
line-height: 150%;
color: #000;
background-color: #292b68;
min-width: 775px;
text-align: center;
}
#wrapper {
text-align: left;
margin-right: auto;
margin-left: auto;
position: relative;
width: 775px;
}
#header_left {
float: left;
background-color: green;
width: 171px;
height: 168px;
}
#header_right {
background-color: red;
width: 604px;
height: 168px;
margin-left: 171px;
}
/* ]] */
/style
/head
body
div id=wrapper
div id=header_left/div
div id=header_right/div
/div
/body
/html
/CODE-
It's one div floated left against another div, but in IE6 it floats
the div left, but then the adjacent div is kitty-corner to floated
div. I'm sure there is a bug in IE regarding this, but I've looked
and can't seem to find it.
The two divs have stated heights and widths and are enclosed in a
wrapper to center the whole thing on the page.
Any help would be great.
Thanks,
Mark
Re: [css-d] Can't figure this out - Center a div with variable width
Hi Clint,
Yes, I understand that part. But the problem is that the content
changes. Thus, I can not specify the width for the content div.
That's where the problem is. Any other ideas?
Thanks,
Mark
---
On Oct 31, 2006, at 2:16 PM, Clint Ecker wrote:
I might be reading your problem wrong, but most people usually center
div's using
div#mydiv { margin-left: auto; margin-right: auto; }
So you might have:
div style=width: 1000px;
div style=width: 500px; margin-left: auto; margin-right:
auto;foo bar!/div
/div
And the inner div would be horizontally centered within the larger,
outer div.
Clint
On 10/31/06, Mark Wheeler [EMAIL PROTECTED] wrote:
Hi all,
Is this even possible? (I'm sure it is, but I still feel pretty new
to css) - Can you have a div (content) centered inside another div
(container) BUT, the content div's width may be different because of
content (thus you can't set the width) AND the div width must
collapse around the content (so if a border was used, it would
collapse around the content)? I can't figure this out. I'm sure there
is a simple solution, but I can't seem to get there. Any help would
be appreciative.
Thanks,
Mark
__
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/
--
Clint Ecker
http://phaedo.cx
312.863.9323
__
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] Can't figure this out - Center a div with variable width
Hi all, Is this even possible? (I'm sure it is, but I still feel pretty new to css) - Can you have a div (content) centered inside another div (container) BUT, the content div's width may be different because of content (thus you can't set the width) AND the div width must collapse around the content (so if a border was used, it would collapse around the content)? I can't figure this out. I'm sure there is a simple solution, but I can't seem to get there. Any help would be appreciative. Thanks, Mark __ 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] UPDATE - IE background image in div disappears with opacity
OK,
I've put together a small test of this problem. Here's a link:
http://www.tonedeafstudios.com/test/test15c.html
You can see the problem - I've put a red border around the div to
show where the background image is not showing. The css is in the
source.
If anyone has an idea on this, I've love to hear it.
Thanks,
Mark
-
On Oct 27, 2006, at 6:03 PM, Mark Wheeler wrote:
Hi all,
I've come across something I think I read about once but after
hunting the archive and googling, I can't seem to find an answer. I
have a png image as a background to a div that is, well, here's the
div css (this is post png processing for png on IE):
.right {
float: left;
width: 16px;
height: 30px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true, sizingMethod=scale, src='images/control_right.png');
opacity: 0.3;
filter: alpha(opacity=30);
border: 1px solid red;
}
The background image does not show up, but the border does. The other
interesting this is if I get rid of the opacity - comment it out
completely, not just set it to 100 - it shows up.
This div is inside an absolutely positioned div which is inside a
relatively positioned div. Maybe that has something to do with it. I
solved it by making the background image an inline image within the
div. Fortunately, I don't need to put anything in the div, but I just
want to know WHY it's doing this. Has any one come across this
problem before and fixed it?
Thanks,
Mark
__
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] IE background image in div disappears with opacity
Hi all,
I've come across something I think I read about once but after
hunting the archive and googling, I can't seem to find an answer. I
have a png image as a background to a div that is, well, here's the
div css (this is post png processing for png on IE):
.right {
float: left;
width: 16px;
height: 30px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true, sizingMethod=scale, src='images/control_right.png');
opacity: 0.3;
filter: alpha(opacity=30);
border: 1px solid red;
}
The background image does not show up, but the border does. The other
interesting this is if I get rid of the opacity - comment it out
completely, not just set it to 100 - it shows up.
This div is inside an absolutely positioned div which is inside a
relatively positioned div. Maybe that has something to do with it. I
solved it by making the background image an inline image within the
div. Fortunately, I don't need to put anything in the div, but I just
want to know WHY it's doing this. Has any one come across this
problem before and fixed it?
Thanks,
Mark
__
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] Famous CSS/Javascript menuins system
Hi Wes, Was it Suckerfish? If so, here's the link: http://www.htmldog.com/articles/suckerfish/dropdowns/ Mark On Oct 23, 2006, at 9:51 PM, Wes Gamble wrote: I've been lurking on this list for a while and there is almost always mention of some well known, currently fairly popular CSS (and Javascript I think) dropdown menuing scheme. It has a very catchy name, but it escapes me. Can anyone help me remember it? Thanks, Wes Gamble __ 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] Inline or block display for div question
Hi all,
Ok, I've been following the why margin-top/bottom don't work for
span class? thread, and have an offshoot question that has been
bugging me for some time. Say I have a div that has a little bit of
content such as:
.div1 {
border: 1px solid red;
padding: 5px;
margin: 5px 10px;
}
div class=div1This is the content/div
And I want to be able to set the margins and padding to what ever I
like, such as the above, how do I get the border to collapse around
the content? If set .div1 to:
display: block;
I get my margins and padding, but the div width (shown by the border
around the div) is the complete width of the page, and if I set .div1
to:
display: inline;
I don't get my margins, but the border now does collapse to the
content width.
I've been muddling through CSS for some time and LOVE It, but still
have some things I don't understand. Perhaps I am using the wrong
display model. Anyone who can enlighten me on this would be greatly
appreciated.
Thanks,
Mark
__
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] IE7 Released
Ok... So is there a way to run IE7 and at least IE6 on the same box? Mark -- On Oct 18, 2006, at 7:34 PM, Mike Soultanian wrote: Well, it looks like it's finally out: http://www.microsoft.com/windows/ie/downloads/default.mspx http://blogs.msdn.com/ie/ later, Mike __ 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/
[css-d] Textarea overlapping div because of Doc Type
Hi, I have come across something I'm not sure how to fix, again... :) I have a textarea inside a div, but the textarea overlaps the div on the right side, ignoring the padding there. This happens with the current doc type: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd; This particular problem only occurs in FireFox. In IE (PC) it fits, but it looks like the div is being stretched out to make the textarea work, but then the div is (I think) longer than I want and the Close Window does not line up correctly. Safari looks great. But if I change the doc type to: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN it all works. My entire site is base on loose.dtd, so I really don't want to change one page for this problem. I'm sure I'm missing something. Any help would be appreciated. Here is a link to the code: http://www.tonedeafstudios.com/test5.html Thanks very much. Mark __ 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] Textarea overlapping div because of Doc Type
Hi Philippe, Great. That worked out good... makes sense, too. The only problem is Safari. It comes up short in the width by 6px. Any ideas on why that would be? Perhaps a bug? Mark - On Oct 8, 2006, at 10:22 PM, Philippe Wittenbergh wrote: On Oct 9, 2006, at 2:13 PM, Mark Wheeler wrote: I have a textarea inside a div, but the textarea overlaps the div on the right side, ignoring the padding there. This happens with the current doc type: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd; This particular problem only occurs in FireFox. In IE (PC) it fits, but it looks like the div is being stretched out to make the textarea work, but then the div is (I think) longer than I want and the Close Window does not line up correctly. Safari looks great. But if I change the doc type to: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN it all works. My entire site is base on loose.dtd, so I really don't want to change one page for this problem. I'm sure I'm missing something. Any help would be appreciated. Here is a link to the code: http://www.tonedeafstudios.com/test5.html You give your textarea a width in %. In strict mode (full doctype) that doesn't include the border and the padding [1]. As everything else on the page is defined in px, use that to specify the width of the textarea. [1] computed width = width+padding-left+padding-right+ border-left +border-right. Philippe --- Philippe Wittenbergh http://emps.l-c-n.com __ 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/
[css-d] Weird IE Windows border problem (no kidding!)
Hi all, I have the following page working great in Safari, FireFox (Mac and PC), but IE6/Win is doing some weird stuff. I'm getting a double top border (repeats the top border about 100px down form where the first one is - the one that is supposed to be there.) on my containing div and some of the side borders just drops out part of the way down the page. I can't figure this one out. Here are links to the full layout (with all the content), a simplified test layout (no content), and the external css file. http://www.biztalk06.com/agenda.php http://www.biztalk06.com/agenda-test.php http://www.biztalk06.com/css/sub.css If anyone has an idea -- I be VERY grateful! This is the last piece to my puzzle. Thanks, Mark __ 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] CSS Float clear question
Hi, I have a little problem I can't seem to figure out. Below is a sample code of some floated divs. It all is as I would like it, except the div that contains MORE TEXT GOESE HERE I want that to clear the previously floated divs that contain dates and prices, not the red bordered div. This way, the div containing MORE TEXT GOES HERE... will end up underneath the previous four floated divs. I put that section in a div by itself, thinking that clearing the final float would only clear within the containing div, but it's not doing that. It seems to work fine in IE/Win, but not in Firefox or Safari. Any help would be appreciated. Here's the sample code. CODE !DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN html head meta http-equiv=content-type content=text/html;charset=iso-8859-1 /head body bgcolor=#ff div style=float: left; border: 1px solid red; height: 200px; width: 100px;/div div SOME TEXT GOES HERE... brbr div style=float: left; width: 80px; br DATEbr DATEbr /div div style=float: left; width: 100px; text-align: center; bCATEGORY/bbr span class=pcbold $PRICEbr $PRICEbr /span /div div style=float: left; width: 100px; text-align: center; bCATEGORY/bbr span class=pcbold $PRICEbr $PRICEbr /span /div div style=float: left; width: 100px; text-align: center bCATEGORY/bbr span class=pcbold $PRICEbr $PRICEbr /span /div div style=clear: left brMORE TEXT GOES HERE... /div /div /body /html /CODE--- Thanks, Mark __ 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] CSS Float clear question
First off, thank you to Michael for putting my script up on a site. Sorry about that. I forgot that's the way to go. It's been a while since I've been here. Second, Gunlaug - That did the trick. I'm still fairly new at css, trial and error and all that. I never would have thought about using the overflow attribute to contain the div. I skimmed through the w3.org info and didn't fully understand it. I need to read it some more I guess. But in a nut shell (If that's possible) why doe the overflow: hidden make the float work as I wanted it to? Thanks, Mark -- On Aug 8, 2006, at 11:37 AM, Gunlaug Sørtun wrote: Michael Geary wrote: From: Mark Wheeler I have a little problem I can't seem to figure out. http://mg.to/test/float.html When I load the page in IE, the MORE TEXT GOES HERE is below the red box, just like in Firefox. Solution (one of many) is to isolate the container: keep the clear from acting on elements outside the container. div style=overflow: hidden; zoom: 1; SOME TEXT GOES HERE... ...and so on. Se below for references. I ran into what looks like the same problem this morning. On the right side of this page is a calendar widget and event list: http://blog.zvents.com/ Similar problem, and similar solution. http://www.zvents.com/widgets/calendar/2/zvents-calendar-fancy.html Similar problem, and similar solution. Is there a reference that anyone can recommend that would help explain this kind of problem? Containing and isolating floats will also isolate any 'clear'. Thus, the relevant information is found here: 'Block formatting contexts' in all standard compliant browsers: http://www.w3.org/TR/CSS21/visuren.html#q15 The choice of style (float/CSS-table/overflow) to achieve the right effect, depends on entire layout in each case. 'Not quite the same standard', for IE/win only: http://www.satzansatz.de/cssd/onhavinglayout.html The choice of hack (or not) depends on entire layout in each case. regards Georg -- http://www.gunlaug.no __ 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] CSS Float clear question
Thank you so much for the explanation. I understand, now. Mark --- On Aug 8, 2006, at 3:27 PM, Gunlaug Sørtun wrote: Ok, two in one since it is the same case. Mark Wheeler wrote: First off, thank you to Michael for putting my script up on a site. Sorry about that. I forgot that's the way to go. It's been a while since I've been here. Second, Gunlaug - That did the trick. I'm still fairly new at css, trial and error and all that. I never would have thought about using the overflow attribute to contain the div. I skimmed through the w3.org info and didn't fully understand it. I need to read it some more I guess. But in a nut shell (If that's possible) why doe the overflow: hidden make the float work as I wanted it to? Well, the answer is in the text: ... establish new block formatting context. http://www.w3.org/TR/CSS21/visuren.html#q15 That means (among other things) complete separation or isolation from its surroundings, while the container itself behaves in the page-layout as the styling says. The one I used: 'overflow: hidden;' does just that and nothing else, which makes it practical in some cases but definitely not in others. Example: I can't use 'overflow: hidden;' all that often because it would cut off my many over the edge elements like titles and such. See on: http://www.gunlaug.no/contents/wd_example_01_04.html how that will turn out. This example: http://www.gunlaug.no/contents/wd_example_01_03.html use 'display: table/table-cell', but there are some differences between browsers for that one too. I use 'float:left/right' whenever I can (or have to), as floats work quite well across browser-land - even in IE/win. Of course: not everything can be floated, so the other alternatives are good to have. Michael Geary wrote: So I understand why the overflow: hidden; fixed it, but could you explain what the IE-specific zoom: 1; is for? I tried leaving it out and IE still looked OK. I put it back in just in case but would like to understand what its purpose is. Thanks! The proprietary 'zoom: 1;' acts as a 'hasLayout' trigger in IE5.5+. It does (of course) not validate, but it is one of the few triggers that isn't likely to give negative side-effects - almost regardless of layout it is used on. 'Not quite the same standard', for IE/win only: http:// www.satzansatz.de/cssd/onhavinglayout.html The choice of hack (or not) depends on entire layout in each case. Yes, I've studied that page too - it's a great piece of research. In this particular case, my page looked OK in IE but was bad in Firefox, so an IE hack wouldn't have helped - but the overflow trick was just the ticket. If there's already a 'hasLayout' trigger in place - like 'width' or 'height', then 'zoom: 1;' won't have any additional effect. In such cases 'zoom: 1;' should not be used. Note that 'zoom: (any values other than 1 or 100%);' will make IE/win zoom that container, somewhat like Opera does but Microsoft has taken an entirely different approach. Thus, be careful with the value :-) regards Georg -- http://www.gunlaug.no __ 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] Change background and border color on input field
Hi,
I did a search (albeit quick) of the archives for the answer to this,
but could not find it. I would like to change the background and border
color when the focus is on the input field. The following works fine in
FireFox and Safari (background color only), but not in IE PC. Do I need
to resort to a javascript onfocus/onblur to make this work with PC, or
am I missing something here?
input.blueinput, textarea.blueinput {
background: #f4f4f4;
border: solid 1px #7eb3f6;
padding: 2px;
}
input.blueinput:focus, textarea.blueinput:focus {
border:1px solid #019201;
background-color: #DAFEDA;
}
Thanks very much,
Mark
__
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/
