[css-d] link style problem
Hello, I have about 20 links in a side menu a href=1.phplink one/abr / a href=2.phplink two /abr / a href=3.phplink three /abr / a href=4.phplink four/abr / a href=5.phplink five/abr / a href=6.phplink six /abr / They are links to 20 locations. The layout of the pages are identical the only thing that changes is the address and map. The body id of all 20 pages is the same body id=contacts but I need a clever way to highlight the link when I am on that particular pages. I do not want multiple body id's if possible and the links list is a common file inserted via php (the locations often change and I only want to make one central ammendment) I could do it with id's on the a tags and inline css but this seems a bit messy and bad practice. Any ideas? R. __ 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] link style problem
On 13/02/07, Ross Hulford [EMAIL PROTECTED] wrote: I have about 20 links in a side menu a href=1.phplink one/abr / a href=2.phplink two /abr / You should probably be using lists for your lists instead of line breaks. They are links to 20 locations. The layout of the pages are identical the only thing that changes is the address and map. The body id of all 20 pages is the same body id=contacts but I need a clever way to highlight the link when I am on that particular pages. My preferred technique is a bit of logic in your CMS to output a em element instead of an a element for the menu items representing the current page. I do not want multiple body id's if possible and the links list is a common file inserted via php (the locations often change and I only want to make one central ammendment) So you can represent each link as an associative array of a URL and a label, and store them in an array. Then you can loop over that array and compare the URL to that of the current page to make the decision with. -- David Dorward http://dorward.me.ukhttp://blog.dorward.me.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/
Re: [css-d] Rounded corners and csszengarden principles
Gunlaug Sørtun wrote: Am I right that this is the only set of choices? Not quite, as CSS can carry it alone... http://virtuelvis.com/gallery/css/rounded/ ...but a certain series of browsers doesn't support CSS that well. I like this one... Same approach as in my first post: http://www.ambiguism.com/sandbox/scripts/mozilla.html I like this one for when rounded corners are not crucial to the overall look/feel... for the browsers that play nice, they get nice corners... others get the standard look. Otherwise, I go for the multi-div.class containers. M -- Wishlist: http://snipurl.com/vrs9 Switch: http://browsehappy.com/ BCC?: http://snipurl.com/w6f8 My: http://del.icio.us/mhulse __ 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] Rounded corners and csszengarden principles
Gunlaug, Micky, Thank you for the links to the CSS and HTML code necessary to put corners in as I'm looking to do. However, I don't seem to be using the :before and :after tags correctly. Is there something wrong with my code? I have an example here: http://articlass.org -- Dave M G Ubuntu 6.10 Edgy Eft Kernel 2.6.17.7 Pentium D Dual Core Processor PHP 5, MySQL 5, Apache 2 __ 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] First timer looking for css review
Mike Buettner wrote:
I did a bunch more reading (and associated confusion) with this result:
Site: http://scottriggs.com/2007/index.html
CSS: http://scottriggs.com/2007/css.html
1. I used Francky's suggestion:
* The 3 small images [...]
And it worked great.
2. Don't really understand this comment though:
* Sometimes you are using a CLASS and an ID with the same name. For
the most elements, I found in the stylesheet only the ID-references
(with the # before the name). For elements with only the ID-styles
the CLASSes in the html can be missed.
Hi Mike,
For instance I see in the html:
div class=bgTopbar id=bgTopbar
In the stylesheet I see only the ID mentioned:
#bgTopbar { ... }
If in addition a CLASS with this name was defined, it should have read:
.bgTopbar { ... }
But as this CLASS doesn't exist in the css stylesheet, the reference to
it can be missed in the html. So what is needed to show the Topbar
styles, is only:
div id=bgTopbar
3. Back to having trouble in IE Mac 5.2 with the page not centering
in browser.
I've no Mac aboard, and no solution for this. Maybe some of the other
list members can check? ;-)
4. My biggest issue is not being able to get the left and right
columns to expand down (with more content) and pull the other column
with it:
http://scottriggs.com/2007/indexv2.html
CSS and HTML validated.
Thanks,
Mike
In your construction, the Scott Riggs image (rtcol_pichome.jpg) is
connected to the bottom of the right column. If the left column is
longer, this bottom is not the bottom of the combination, and a white
gap under it (towards the footer bar) is showed.
What you can do, is to connect the image to a bottom line div under both
columns (i.e. in the footer bar), and then working upwards. This can be
done by isolating this div from the normal flow (with a float: right),
and giving this div a negative margin-top of the amount of the height of
the image. Then it is pushed upwards. :-)
Remaining problem is, that the man's head can go so far upstairs, that
the image part over there is covering the under parts of the 3 images
(or something else) in the right column. This will occur if the left
column is too small.
To avoid this, we can give the right column an empty space under the
content, which is some larger in height as the img. We can do this by
adding a div at the end of the right column, with only a height in it.
Here is a testpage
http://home.tiscali.nl/developerscorner/css-discuss/test-indexv2.html.
If you browse with something else than IE, now you can see the img
moving on the fly (and staying fixed to the bottom), if you change the
font-size in the browser. [1]
Greetings and success,
francky
[1] ... and you'll see some other things to correct. ;-)
__
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] Rounded corners and csszengarden principles
Dave M G wrote:
Is there something wrong with my code? I have an example here:
http://articlass.org
Try changing your source code to:
div class=wholeContainer
Or change your CSS to:
#wholeContainer:before { ...yadda... )
#wholeContainer:after { ...yadda... }
Keep in mind, this technique is not fully supported, but degrades
gracefully (from what I have seen and tested.)
Good luck,
Cheers,
Micky
--
Wishlist: http://snipurl.com/vrs9
Switch: http://browsehappy.com/
BCC?: http://snipurl.com/w6f8
My: http://del.icio.us/mhulse
__
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 overlapping DIVs
Hi all, I have following two pages http://www.dywiz.com/test/boxes/boxes_1.html and http://www.dywiz.com/test/boxes/boxes_2.html How you see on the 'boxes 2' bottom menu is included in right text content but if text is shorter than here we can see result on the 'boxes 1' - bottom menu overlap on footer content. How I can fix it? -- zbyszek pietras __ 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] link style problem
It looks like you already had the idea but I add a class=current to the
a and this in my CSS:
#menu ul a.current, #menu ul a:link.current, #menu ul a:visited.current,
#menu ul a:hover.current {
background: url(images/button_current.gif) top left no-repeat;
cursor: default;
color: #ff;
}
FireFox will allow just the #menu ul a.current but without all the
psuedoclasses IE will not display the current button which is different
from the normal and hover states.
Mike
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Ross Hulford
Sent: Tuesday, February 13, 2007 3:17 AM
To: css-d@lists.css-discuss.org
Subject: [css-d] link style problem
Hello,
I have about 20 links in a side menu
a href=1.phplink one/abr /
a href=2.phplink two /abr /
a href=3.phplink three /abr /
a href=4.phplink four/abr /
a href=5.phplink five/abr /
a href=6.phplink six /abr /
They are links to 20 locations. The layout of the pages are identical the
only thing that changes is the address and map.
The body id of all 20 pages is the same body id=contacts but I need a
clever way to highlight the link when I am on that particular pages.
I do not want multiple body id's if possible and the links list is a common
file inserted via php (the locations often change and I only want to make
one central ammendment)
I could do it with id's on the a tags and inline css but this seems a bit
messy and bad practice.
Any ideas?
R.
__
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] ie 6 text/float problems
Well, you're clearly experiencing a variant of the 'Explorer 6 Duplicate Characters Bug'... Excellent! You are the man, that fixed it completely. Many thanks, that was driving me crazy. -john -- Wild West Studios 835 Main Street Belgium, WI 53004 1-262-285-3637 phone 1-262-285-3714 fax [EMAIL PROTECTED] email http://www.wildweststudios.com __ 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] height issue
I have an issue that comes up a lot that I have never found a good fix for. A lot of the sites I support have a standard 2 column display. The left column is the navigation and the right is the content. There is a wrapper around the entire thing and a footer at the bottom. The issue that I see is that let's say the navigation area is 700 px high and the content area is 1000px high. It works great. However, if the navigation is 700px and the content is only 500px, the footer comes up too far and the navigation area overlaps at the bottom. I don't have an example of this right now, I just want ideas. Like I said, there is always a wrapper around the whole thing so why does the footer (outside of the wrapper) get displayed under the navigation if there is a wrapper? In other words, how do I make the wrapper assume the height of either of the child elements to ensure that the height is always correct? I hope I'm making sense. I know what I want to say, it's just not coming out really well right now. Thanks in advance for any suggestions anyone might have. -- Jake Churchill CF Webtools 11204 Davenport, Ste. 200b Omaha, NE 68154 http://www.cfwebtools.com 402-408-3733 x103 __ 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 overlapping DIVs
zbyszekp wrote:
http://www.dywiz.com/test/boxes/boxes_1.html
http://www.dywiz.com/test/boxes/boxes_2.html
How you see on the 'boxes 2' bottom menu is included in right text
content but if text is shorter than here we can see result on the 'boxes
1' - bottom menu overlap on footer content.
How I can fix it?
Replace the entire #menuLewe div style with this...
#menuLewe {
width: 203px;
}
...so the left menu controls its own height without any restrictions.
Then replace the style for #zawMain with this...
#zawMain {
background-image: url(layout_3.png);
background-repeat: repeat-y;
float: left;
width: 100%;
}
Floats will expand to contain floats, so this will make #zawMain
self-adjust and stay _at least_ as tall as the menu. Therefore, no
overlapping will occur no matter how little or how much text you put
into the #zawPrawa div.
regards
Georg
--
http://www.gunlaug.no
__
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 overlapping DIVs
hi,
it seems I fixed it with 'min-height' tag with IE6 corrrections:
* html #zawMain {
height: NUMBERpx;
}
--
zbyszek pietras
__
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] height issue
Jake Churchill wrote: In other words, how do I make the wrapper assume the height of either of the child elements to ensure that the height is always correct? If some of those child elements are 'absolute positioned', then _they_ won't affect the height of their parent - no matter what. A 'min-height' on the parent _can_ work well enough in some cases, but usually fails a bit if font-resizing is applied in browsers. If you use 'floats' and 'in-flow' elements, then it is usually a question of making the parent 'expand to contain floats'. This is as good an example/solution as any, I think... http://www.positioniseverything.net/easyclearing.html regards Georg -- http://www.gunlaug.no __ 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] center issues with ie6
hi all, i have a page which is set up like so: div id=mainWrapper div id=contentWrapper div id=mainColumn /div -- Jeffrey Morin __ 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] center issues with ie6 and ie mac
sorry about that half email: hi all, i have a page which is set up like so: div id=mainWrapper div id=contentWrapper div id=mainColumn /div /div div id=rightColumn /div /div now i have my header inside a div in the contentWrapper but for some reason it will not center in ie6 or ie on the mac. it's fine in ff and opera. any ideas? the css for the header is set to margin: 0 auto; and if i try to position it relatively it messes up in firefox. fi anyone has any ideas or help that would be awesome! -- Jeffrey Morin __ 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] center issues with ie6
jeffrey morin wrote: hi all, i have a page which is set up like so: div id=mainWrapper div id=contentWrapper div id=mainColumn /div This is pretty much what I'm always trying to get across. Hehehe. I'm withholding my criticisms for now, Jeff (close your divs, innit). What was the question? Regards, Barney __ 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] RollOver href=# makes text disappear?
http://www.centrestagedancestudio.com/newmenu.htm http://www.centrestagedancestudio.com/assets/centrestage.css http://www.centrestagedancestudio.com/loadmenu.js http://www.centrestagedancestudio.com/mm_menu.js This site is a mess. Made by some version of Dreamweaver it's incredibly bloated and a pain. When I took it over I went through and modified all the parts that I had forseen needing changes so I could at least find my way through it. Over the years I've modified different parts here and but I know my client won't spend the money to have me convert it to XHTML/CSS. She won't see a different so why pay for it? Anyway, she needs a new button and I figured I'd try to convert the menu to a list with CSS rollovers. I'm condensing over 120 lines of code into about 20 which will make the HTML nicer to look at, doesn't use images for the buttons so the weight of the document will decrease drastically, and it'll be a breeze to add buttons later. Two of the buttons, Studio and Costumes, have a JavaScript rollover on them. Because both buttons don't point directly to a page, only the resulting menu items that flyout, I have an href=# on those two links. When you RollOver those links the type in the li disappears. As soon as your mouse leaves the button, pointing to another button or to the resulting flyout items, the text reappears. If I change the href=# to anything besides # the text stays visible. This might be a JavaScript problem but as the RollOvers are done with CSS I don't think so. I've taken the onMouseOver and onMouseOut statements from the a and the text still disappears. Any ideas on where the text is going? Thanks, Mike __ 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] RollOver href=# makes text disappear?
On 2/13/07, Michael Stevens [EMAIL PROTECTED] wrote:
http://www.centrestagedancestudio.com/newmenu.htm
http://www.centrestagedancestudio.com/assets/centrestage.css
http://www.centrestagedancestudio.com/loadmenu.js
http://www.centrestagedancestudio.com/mm_menu.js
This site is a mess. Made by some version of Dreamweaver it's incredibly
bloated and a pain. When I took it over I went through and modified all the
parts that I had forseen needing changes so I could at least find my way
through it. Over the years I've modified different parts here and but I know
my client won't spend the money to have me convert it to XHTML/CSS. She
won't see a different so why pay for it?
Anyway, she needs a new button and I figured I'd try to convert the menu to
a list with CSS rollovers. I'm condensing over 120 lines of code into about
20 which will make the HTML nicer to look at, doesn't use images for the
buttons so the weight of the document will decrease drastically, and it'll
be a breeze to add buttons later.
Two of the buttons, Studio and Costumes, have a JavaScript rollover on
them. Because both buttons don't point directly to a page, only the
resulting menu items that flyout, I have an href=# on those two links.
When you RollOver those links the type in the li disappears. As soon as
your mouse leaves the button, pointing to another button or to the resulting
flyout items, the text reappears. If I change the href=# to anything
besides # the text stays visible.
This might be a JavaScript problem but as the RollOvers are done with CSS I
don't think so. I've taken the onMouseOver and onMouseOut statements from
the a and the text still disappears.
Any ideas on where the text is going?
Thanks,
Mike
__
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/
When I change this:
#menu ul li a.flyout, #menu ul li a.flyout:link, #menu ul li a.flyout:visited {
background: #00 url(../gif/btn_flyout.gif) top right no-repeat;
}
...to this:
#menu ul li a.flyout, #menu ul li a.flyout:link, #menu ul li a.flyout:visited {
background: #00 url(../gif/btn_flyout.gif) top right no-repeat;
color: #ff;
}
It seems to stick. I'm in a rush, so I don't know if there are other
side effects.
__
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] First timer looking for css review
Thanks again Francky! I especially like this part: [1] ... and you'll see some other things to correct. ;-) No kidding. Mike __ 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] Detail View Bleedthrough
Hi- I'm trying to figure out why IE has elements bleeding through on this detail view popup DIV: http://www.shuttersbeachstyle.weblobby.com/prodDetail.asp? ID=092LIKE=SHT10.001303 It would be on the links down in the order form table. Any help is appreciated. Thanks! chris.pallé, interactive media designer [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] RollOver href=# makes text disappear?
Of course, the first place I shoulda looked...
I actually made a #menu ul li a.flyout:hover declaration which works just
the same.
Thanks,
Mike
-Original Message-
The text is going nowhere but it is turning the same colour as the
background.
The background colour is specified for the class flyout and overrides the
CSS effect where the class is not specified
You have:
#menu ul li a.flyout, #menu ul li a.flyout:link, #menu ul li
a.flyout:visited {
background: #00 url(../gif/btn_flyout.gif) top right no-repeat; }
#menu ul li a:hover {
background: #ff none;
color: #00;
}
Alter
#menu ul li a:hover {
To
#menu ul li a.visited:hover {
and it all comes right.
__
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 div wrapping
Hello everyone,
I am having a problem with some code. The problem is it looks fine
for me on FF and IE7 but my customer is seeing the right-hand div wrap
under the left div.
Can someone help me figure out why this is wrapping and fix it?
Thanks in advance! -Marty
The code is like this--
div id=page
div id=content
/div
div id=sidebar
/div
/div
The sidebar is wrapping under the content div.
The CSS is--
#page {
width: 770px;
margin: 0 auto;
text-align: left;
background: url(images/tile.gif) repeat-y;
}
#content {
float: left;
text-align: left;
width: 393px;
margin: 20px 0 0 52px;
padding: 0;
line-height: 1.5em;
}
#sidebar {
margin: 0 30px 0 481px;
padding: 23px 0 0 0;
font-size: 85%;
line-height: 1.4em;
color: #999;
background: url(images/sidebar_bg.gif) no-repeat 0 0;
}
__
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] followup to last email
Sorry everyone, I forgot to include the URL-- http://www.fireflylightinginnovations.com/ For the problem with the div. Thanks again, Marty __ 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] center issues with ie6 and ie mac
jeffrey morin wrote: i have a page which is set up like so: div id=mainWrapper div id=contentWrapper div id=mainColumn /div /div div id=rightColumn /div /div now i have my header inside a div in the contentWrapper but for some reason it will not center in ie6 or ie on the mac. it's fine in ff and opera. any ideas? the css for the header is set to margin: 0 auto; and if i try to position it relatively it messes up in firefox. fi anyone has any ideas or help that would be awesome! Centering win/ie5 through 7 can, depending on the particular situation, be very tricky. And, I am not sure if this is what you are after: http://www.chelseacreekstudio.com/ca/cssd/on-center.html. But either way, this article http://bluerobot.com/web/css/center1.html explains the basic premise for pleasing the 'evil' one. HTH, ~dL -- http://chelseacreekstudio.com/ __ 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] center issues with ie6 and ie mac
i actually found that the culprit was an annoying table. but thanks for responding i'll check out the link you sent On 2/13/07, ~davidLaakso [EMAIL PROTECTED] wrote: jeffrey morin wrote: i have a page which is set up like so: div id=mainWrapper div id=contentWrapper div id=mainColumn /div /div div id=rightColumn /div /div now i have my header inside a div in the contentWrapper but for some reason it will not center in ie6 or ie on the mac. it's fine in ff and opera. any ideas? the css for the header is set to margin: 0 auto; and if i try to position it relatively it messes up in firefox. fi anyone has any ideas or help that would be awesome! Centering win/ie5 through 7 can, depending on the particular situation, be very tricky. And, I am not sure if this is what you are after: http://www.chelseacreekstudio.com/ca/cssd/on-center.html. But either way, this article http://bluerobot.com/web/css/center1.html explains the basic premise for pleasing the 'evil' one. HTH, ~dL -- http://chelseacreekstudio.com/ -- Jeffrey Morin __ 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] First timer looking for css review
Finally got this part sorted out. I was confused a bit with the footer bar but found a misplaced /div tag. I found this site to be very helpful in sorting out the various containers: http://www.ilovejackdaniels.com/css/view-page-structure/ Scroll down towards the bottom and insert your site URL. On to the next fix. Thanks! Mike Site: http://scottriggs.com/2007/index.html CSS: http://scottriggs.com/2007/css.html In your construction, the Scott Riggs image (rtcol_pichome.jpg) is connected to the bottom of the right column. If the left column is longer, this bottom is not the bottom of the combination, and a white gap under it (towards the footer bar) is showed. What you can do, is to connect the image to a bottom line div under both columns (i.e. in the footer bar), and then working upwards. This can be done by isolating this div from the normal flow (with a float: right), and giving this div a negative margin-top of the amount of the height of the image. Then it is pushed upwards. :-) Remaining problem is, that the man's head can go so far upstairs, that the image part over there is covering the under parts of the 3 images (or something else) in the right column. This will occur if the left column is too small. To avoid this, we can give the right column an empty space under the content, which is some larger in height as the img. We can do this by adding a div at the end of the right column, with only a height in it. Here is a testpage http://home.tiscali.nl/developerscorner/css- discuss/test-indexv2.html. __ 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 IE6 and CSS dropdown and info request on hover delay behavior
Are there peculiarities with IE6 and @import? Does csshover.htc change any of these rules? (see below) Also my department manager asked me to look for any behavior that might slightly delay the hover behavior to be a little more forgiving to users. I have not seen a recent discussion of this topic. Yes the site is still in tables, but we are working on that too. Using Eric's guide for CSS drop-down list based menus, I have duplicated the look and functionality of the University Javascript based menus. The menu works fine when I link all the style sheets. link href=/css/common.css rel=stylesheet type=text/css link href=/css/pr.css rel=stylesheet type=text/css link href=/css/nav.css rel=stylesheet type=text/css See it here. http://sandboxv3.erau.edu/pr/pr_page3.html My usual practice however is to link to a css file that imports the others as recommended by several authors. In this case it does not work in IE6. This version of the page is identical but imports the three style sheets via one linked .css file. link href=/css/prescott_screen.css rel=stylesheet type=text/css http://sandboxv3.erau.edu/pr/pr_page3b.html Some of the css is working but not the hover behavior only in IE6. If you made it this far, thank you for your time. Arn Arnold Gregory IT Web Services Embry-Riddle Aeronautical University 386-323-8696 __ 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 div wrapping
Marty Martin wrote:
I am having a problem with some code. The problem is it looks fine
for me on FF and IE7 but my customer is seeing the right-hand div
wrap under the left div.
http://www.fireflylightinginnovations.com/
Sure does in IE6 - it's running out of space.
I suggest you turn that #sidebar into a cross-browser reliable float, by
replacing its styles with the following.
#sidebar {
float: right;
margin: 0 29px 0 0;
width: 260px;
display: inline;
padding: 23px 0 0 0;
font-size: 85%;
line-height: 1.4em;
color: #999;
background: url(images/sidebar_bg.gif) no-repeat 0 0;
}
Also, you should replace...
body {font-size: small;}
...with...
body {font-size: 82%;}
...to avoid IE/win's resizing bugs and make it possible to resize text
without breaking the layout.
All tested and ready to go.
regards
Georg
--
http://www.gunlaug.no
__
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 IE6 and CSS dropdown and info request on hover delay behavior
IE makes a mess with .htc files called from a stylesheet. Instead of treating the url as relative to the css origin it looks for it all over the place (mostly in root folder, but no hard rules here). Simplest solution is to use an absolute url in your stylesheet. djn Arnold Gregory wrote: Are there peculiarities with IE6 and @import? Does csshover.htc change any of these rules? -- Dejan Kozina Dolina 346 (TS) - I-34018 Italy tel./fax: +39 040 228 436 - cell.: +39 348 7355 225 http://www.kozina.com/ - e-mail: [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem with div wrapping
On Feb 13, 2007, at 2:32 PM, Gunlaug Sørtun wrote:
I suggest you turn that #sidebar into a cross-browser reliable float,
by
replacing its styles with the following.
#sidebar {
display: inline;
...
What's the purpose of the display: inline in this case?
cheers,
—ml—
__
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 div wrapping
Mark Lundquist wrote:
#sidebar {
display: inline;
...
What's the purpose of the display: inline in this case?
Should have commented it.
It is a hack to fix IE/win's 'margin-doubling on floats' bug. Without
this hack IE6 and older win-versions will make the 29px right margin
twice as big - 58px, and ruin the entire line-up.
This hack doesn't disturb other browsers because a float is a
block-element which can't be turned into an inline-element. That's why
we usually don't feed this hack to IE/win only, but leave it in the open.
It would otherwise make sense to create a new style with something like...
* html #sidebar {display: inline;}
...and place it after the normal styles for #sidebar. I've seen cases
where such a separation was necessary, but not in this case.
regards
Georg
--
http://www.gunlaug.no
__
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] Browser check please
I am only running ie7 and ff2. Could I please have a browser check for ie6 and others. Need to know what it looks like to others. www.trainingdogs.com.au Thanks 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] Browser check please
Hi David, I am not sure what to look for. I did notice that the right hand column does not go all the way down to the footer - is it supposed to? Looks fine otherwise. IE6 and FF2.0.0.1, WinXP HTH, Riva David V wrote: I am only running ie7 and ff2. Could I please have a browser check for ie6 and others. Need to know what it looks like to others. www.trainingdogs.com.au Thanks 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] Browser check please
David V wrote: I am only running ie7 and ff2. Could I please have a browser check for ie6 and others. Need to know what it looks like to others. www.trainingdogs.com.au David I think in order to get reliable cross-browser rendering you will need to get the inline styles into the css file and validate the markup and the css. Best, ~dL -- http://chelseacreekstudio.com/ __ 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] Divs misaligning in IE only
http://www.language-works.com/IRF/about/
CSS: http://www.language-works.com/IRF/css/irfstyles.css
I'm sure this is super simple -- the main body text of my page is shoving
down below the left nav bar in IE. The left and main part of the content
are contained within a div:
#mainbody
{
top: 170px;
}
and the left nav is defined as :
#leftnav {
float:left;
position: relative;
width:200px;
font-weight: bold;
}
the main content defined as:
#maincontent {
padding-left:12px;
border-left: 1px solid #FFCC66;
margin-left: 236px;
}
What am I missing?
Anne
[EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Site Check ::Jehangir::
Grateful for a site check http://www.teerthyatri.com Problem: FF2 on XP SP2 throws the google search box up towards the header; instead of below the navigation menu in left sidebar, as intended. IE7 shows it fine! Many TIA - _j[_ Larry __ 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 ::Jehangir::
I dont think your css is linked right - the styles are not applied at all. Parag __ 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] Divs misaligning in IE only
I believe you are missing a float:left; in #maincontent
so it should look like:
#maincontent {
float:left;
padding-left:12px;
border-left: 1px solid #FFCC66;
margin-left: 236px;
}
Parag
__
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 ::Jehangir::
Parag Jagdale wrote: I dont think your css is linked right - the styles are not applied at all. Parag No stylesheet is fine...please recheck? Thanks _j[_ __ 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/
