[css-d] Son of Suckerfish problems
URL: http://www.numcchildren.org/new/index.html CSS: http://numcchildren.org/new/children.css Browsers that display the site correctly: Firefox, Opera, IE8 Browsers that have problems: Safari, Chrome, IE8 in compatibility view I¹m trying to use the son of suckerfish method for the drop-down navigation. In IE8 compatibility view, the sub-menus appear to the right of their parents, rather than underneath them. In Safari and Chrome, the sub-menu items don¹t change color when hovered over, but they¹re supposed to. Test the site in the latest versions of FF, Opera, or IE8 to see the site functioning properly. Any insight on causes for the issues and/or solutions for them are much appreciated. Thanks in advance, Daniel Hammond Objective Designs dan...@objectivedesigns.com www.objectivedesigns.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] 1px difference in IE7
URL: http://www.northsidecreativeservices.org/sportsandrec CSS: http://www.northsidecreativeservices.org/sportsandrec/sports.css In IE7, the horizontal navigation is shifted down one pixel, so the bottom of the buttons covers up the black horizontal line that is the bottom border for the horizontal navigation area. All other browsers (FF, Safari, Chrome, Opera [all on Mac and Win], and IE8) seem to display it correctly. Daniel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] main content appearing in side column
URL: http://www.numcchildren.org/thezones/index.htm CSS: http://www.numcchildren.org/children.css Does anyone have any idea why Safari (Mac/Win) and Chrome are putting the main content in the side column on the right? View in FF, IE, Opera to see correct layout. Thanks, Daniel Hammond __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] main content appearing in side column
David Laakso wrote:
Daniel Hammond wrote:
URL: http://www.numcchildren.org/thezones/index.htm
CSS: http://www.numcchildren.org/children.css
Does anyone have any idea why Safari (Mac/Win) and Chrome are
putting the main content in the side column on the right? View in
FF, IE, Opera to see correct layout.
Thanks,
Daniel Hammond
#content {
float: left; - :: add, and safari/chrome will
cooperate ::
}
That did it. Endless thanks.
-Daniel
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] site test please
URL: http://www.northsidecreativeservices.org/design.htm CSS: http://www.northsidecreativeservices.org/cs.css Could someone please test the above URL in IE6 and IE7? I heard that someone was looking at the site, and the top nav (blog, design services, banners signs, production) was stacked vertically rather than in line horizontally. I tested it in IE8, Chrome, Opera, Safari, and FF (Mac and Win), and they all display it correctly (in line horizontally). browsershots.org wasn't working with this URL for some reason. Thanks, Daniel Hammond __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] site test please
David Laakso wrote: Daniel Hammond wrote: URL: http://www.northsidecreativeservices.org/design.htm CSS: http://www.northsidecreativeservices.org/cs.css Could someone please test the above URL in IE6 and IE7? I heard that someone was looking at the site, and the top nav (blog, design services, banners signs, production) was stacked vertically rather than in line horizontally. I tested it in IE8, Chrome, Opera, Safari, and FF (Mac and Win), and they all display it correctly (in line horizontally). browsershots.org wasn't working with this URL for some reason. Thanks, Daniel Hammond Try changing all instances in #nav from: display: inline-block; to: display: inline; That fixed the initial problem, but it also messed with the height of the nav. It appears that line-height no longer affects it. The nav also no longer touches the top of the white area as it's supposed to. Daniel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE and Opera incorrectly displaying nav
Daniel Hammond wrote: Daniel Hammond wrote: URL: http://www.numccreativeservices.org/site/index.htm CSS: http://www.numccreativeservices.org/site/cs.css FF, Safari, and Google Chrome treat the navigation correctly. It's the active state (when you click on a button) that is the issue here. IE and Opera don't show the active state as it's supposed to be. Perhaps they don't support the :active pseudo class on list item elements? I know IE7 does not, and Opera 9.6, 10, and IE8 appear not to either. Cordially, David But if you test it in Opera/IE, you'll see that the small graphic on the left side of the buttons does respond to the active state. It's just the larger graphic that is the rest of the button that does not. Does that make sense? Precisely. The left side graphic is revealed by the active state on the 'A' element, while the right side graphic is triggered by an active state on the list item (LI). Cordially, David I see. Is this a futile endeavor then? Should I abandon that effect for the navigation? Or is there some way around it? Thanks, Daniel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE and Opera incorrectly displaying nav
URL: http://www.numccreativeservices.org/site/index.htm CSS: http://www.numccreativeservices.org/site/cs.css FF, Safari, and Google Chrome treat the navigation correctly. It's the active state (when you click on a button) that is the issue here. IE and Opera don't show the active state as it's supposed to be. Any ideas on how to get them right? Thanks, Daniel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE and Opera incorrectly displaying nav
Daniel Hammond wrote: URL: http://www.numccreativeservices.org/site/index.htm CSS: http://www.numccreativeservices.org/site/cs.css FF, Safari, and Google Chrome treat the navigation correctly. It's the active state (when you click on a button) that is the issue here. IE and Opera don't show the active state as it's supposed to be. Perhaps they don't support the :active pseudo class on list item elements? I know IE7 does not, and Opera 9.6, 10, and IE8 appear not to either. Cordially, David -- But if you test it in Opera/IE, you'll see that the small graphic on the left side of the buttons does respond to the active state. It's just the larger graphic that is the rest of the button that does not. Does that make sense? Thanks, Daniel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] nav displaying incorrectly in IE
Daniel Hammond wrote:
URL: http://www.studentremix.org
The top navigation (Middle School, High School, Parents) displays
correctly in FF, Safari, and Opera, but IE really messes it up.
Internet Explorer doesn't support display:inline-block.
Changing this rule should help:
#navmenu li {
display: inline-block;
display: inline !ie; zoom:1 !ie;/* inline-block for IE */
height: 63px;
line-height: 63px;
margin: 0 0 0 14px;
padding: 0px;
vertical-align: bottom; /* might also need this */
}
Hope it helps.
--Bill
That didn't quite do it. Thanks for the attempt though. I messed
around with it a little more, and if you look at it now, you'll see
that it looks a little better, but still not how it should be. Again,
look at it in FF to see how it is supposed to look. IE is having some
padding/margin issues or something.
Thanks,
Daniel
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] nav displaying incorrectly in IE
Daniel Hammond wrote: Daniel Hammond wrote: URL: http://www.studentremix.org The top navigation (Middle School, High School, Parents) displays correctly in FF, Safari, and Opera, but IE really messes it up. Again, look at it in FF to see how it is supposed to look. IE is having some padding/margin issues or something. Thanks, Daniel It may look as it is supposed to in FF but +1 font-scaling breaks the layout. Would it help to do just a very simple test case with just the nav in question (isolating it) on a clean sheet with the styles embedded in the head of the document? Might make it easier to de-bug. Are you trying to hit IE/6, too? IE6 would be nice, but if we get it working in IE7, and IE6 still requires a good bit of debugging, then I won't worry about it too much. I can work on isolating it on its own page. Let me know if you come across any solutions until then, though. Thanks much, Daniel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] nav displaying incorrectly in IE
URL: http://www.studentremix.org CSS: http://www.studentremix.org/templates/js_jamba/css/nav.css http://www.studentremix.org/templates/js_jamba/css/style2.css The top navigation (Middle School, High School, Parents) displays correctly in FF, Safari, and Opera, but IE really messes it up. You can see what I mean by viewing it in those browsers. Any help toward making it look everywhere as it does in the better browsers would be much appreciated. Thanks, Daniel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE not hiding overflow?
| Daniel Hammond wrote:
|
| URL: http://www.studentremix.org/ms/index.htm There is a little bit
| of blue extending down below the nav bar.
|
| Delete...
| #nav a, #nav strong {
| position: relative;
| }
|
| ...and also delete the...
|
| * html #nav {
| overflow: visible;
| }
|
| IE's bug is that elements with 'position: relative' declared on them
| will overflow containers with 'overflow: hidden' declared -
| visibly but
| without taking up space. This overflow bug is sometimes exploited as
| part of the cure for IE6' auto-expansion bug, but in your
| case it does
| no good.
|
| regards
| Georg
Perfect! Thanks so much.
Daniel
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE not hiding overflow?
| On Wed, Jan 14, 2009 at 7:04 PM, Daniel Hammond | dan...@objectivedesigns.com wrote: | I have three things for you guys to look at. IE6 and IE7 | are the only | browsers having this problem. | | Here's the first thing: | URL: http://www.studentremix.org/ms/index.htm | CSS: http://www.studentremix.org/ms/ms.css | Screenshot of the problem: http://www.studentremix.org/issues/ms.jpg | The red arrows show what's going wrong. There is a little | bit of blue | extending down below the nav bar. It's not supposed to do | that. View the | page in FF, Opera, Safari, or Chrome to see how it's | supposed to look. | | It's probably not a case of failing to hide overflow but of it making | the element larger than you expect. Slap on a red border as a test and | I bet it will be beneath your unwanted bit of blue. | Richard Ok, that may be so, but do you (or anyone else) know how I can fix the problem? Thanks, Daniel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE not hiding overflow?
| Daniel Hammond wrote:
| Here's the first thing:
| URL: http://www.studentremix.org/ms/index.htm
| CSS: http://www.studentremix.org/ms/ms.css
| Screenshot of the problem: http://www.studentremix.org/issues/ms.jpg
| The red arrows show what's going wrong. There is a little
| bit of blue
| extending down below the nav bar. It's not supposed to do
| that. View the
| page in FF, Opera, Safari, or Chrome to see how it's
| supposed to look.
|
|
|
| The hasLayout trigger [1] for IE/7 (will not effect compliant
| browsers) is:
| #nav {
| /*height:29px; */
| min-height: 29px;
| }
| The hasLayout trigger [1] for IE/6 is:
| * html #nav {
| overflow: visible;
| }
| I did not look at the second or the third thing you wrote about...
| [1] http://www.satzansatz.de/cssd/onhavinglayout.html
| ~d
That didn't do it. When I added those to my CSS, it didn't affect IE7 and
made the unwanted extra blue span the entire width of the nav bar in IE6.
Any other ideas?
Thanks,
Daniel
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE not hiding overflow?
| Daniel Hammond wrote: | | | That didn't do it. When I added those to my CSS, it didn't | affect IE7 and | made the unwanted extra blue span the entire width of the | nav bar in IE6. | Daniel | | | Seems to work on this end in IE/6 and IE/7. | Please see: | http://chelseacreekstudio.com/ca/cssd/one.htm | Or have I misunderstood the issue? Yes, I think you have misunderstood. I do *not* want that extra bit of blue under the navbar. Look at the site in Firefox, and you'll see how it's supposed to look. Thanks, Daniel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Safari, Opera, Chrome pushing image to bottom of screen
| URL: http://www.studentremix.org
| CSS: http://www.studentremix.org/landing.css
|
| For a reference of what this page should look like, look at
| it in FF
| or IE.
| They display it correctly. Safari, Opera, and Google Chrome
| push the
| blue
| image to the bottom of the screen. I don't see anything in the CSS
| that
| would be causing this. Can anyone else see what the issue is?
|
| Actually, Gecko could be wrong here...
| #portalWrapper { /*landing.css (line 39)*/
| background:transparent none repeat scroll 0 0;
| display:table;
| margin:345px auto 0; /* --- */
|
| Gecko puts the margin inside the anonymous table box that wraps an
| element with display table, where as the other mentioned
| browsers put
| it outside. (see the illustration in [1])
|
| There has been some discussion on www-style on what the actual
| behaviour should be (without any firm conclusion yet, but all
| browsers
| appear slightly wrong).
|
| set that margin-top to 0 and use margin on the links inside
| it to the
| desired value. BTW
|
| BTW:
| a.portalLeftRight {
| /**/
| display:inline-block;
| float:left;
| }
| That 'display:inline-block' is no needed. Specifying'float:left/
| right' always makes an element display:block.
|
| [1] http://www.w3.org/TR/CSS21/tables.html#model
|
| Philippe
Thanks, that did the trick.
Daniel
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE not hiding overflow?
I have three things for you guys to look at. IE6 and IE7 are the only browsers having this problem. Here's the first thing: URL: http://www.studentremix.org/ms/index.htm CSS: http://www.studentremix.org/ms/ms.css Screenshot of the problem: http://www.studentremix.org/issues/ms.jpg The red arrows show what's going wrong. There is a little bit of blue extending down below the nav bar. It's not supposed to do that. View the page in FF, Opera, Safari, or Chrome to see how it's supposed to look. Second thing: URL: http://www.studentremix.org/hs/index.htm CSS: http://www.studentremix.org/hs/hs.css Screenshot of the problem: http://www.studentremix.org/issues/hs.jpg When this one is viewed in IE, it displays it correctly. Strange. Third thing: URL: http://www.studentremix.org/parents/index.htm CSS: http://www.studentremix.org/parents/parents.css Screenshot of the problem: http://www.studentremix.org/issues/parents.jpg The same problem that the Middle School section has also appears here, except it's confined to the right-side column, rather than spanning all of the nav links. Does anyone have any ideas as to why IE is making this happen? Much thanks, Daniel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Safari, Opera, Chrome pushing image to bottom of screen
URL: http://www.studentremix.org CSS: http://www.studentremix.org/landing.css For a reference of what this page should look like, look at it in FF or IE. They display it correctly. Safari, Opera, and Google Chrome push the blue image to the bottom of the screen. I don't see anything in the CSS that would be causing this. Can anyone else see what the issue is? Thanks, Daniel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Content getting pushed out to the side
URL: www.metroatlantaproject.org CSS: www.metroatlantaproject.org/css/main.css FF3, Opera, IE7, and IE6 display the site correctly. When I open the site in Safari and Google Chrome, the body content is pushed out to the right of the containing structure. What's going on? (all browsers tested are on Windows) Thanks, Daniel Hammond Objective Designs 770-842-8817 [EMAIL PROTECTED] www.objectivedesigns.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Embedded SWF isn't linking
| Daniel Hammond wrote: | URL: http://www.studentremix.org/hs/media.htm | CSS: http://www.studentremix.org/hs/hs.css | The flash animation (top object in the sidebar on the | right) is supposed to | link to http://gallery.me.com/northsideyouth#gallery; when | you click on | it, | but it's not doing anything when clicked on. It's not | acting like a link at | all. Any idea why? | | | Lourens Thalen wrote: | What you should do is place the transparent link on top of the flash | animation. (presuming you can't fix the link in the flash | file directly) | Use position absolute to place it on top of the flashfile, | give it the | correct height and width. | Do NOT forget to give a z-index to the object and embed | tag, you can just | use position: relative and z-index: 1;, this will do just fine. | Problem is, flash always wants to be on top, tha's what's | causing the | problem atm. :) | | | I'm sorry to seem like such a novice, but I haven't used absolute | positioning or z-indexing before, so would you mind giving | me the lines of | code that I need to add to my files? | Thanks, | Daniel | | position: absolute; is the line of code for absolute positioning | z-index: 1; line of code for z-index; | --- | Alexandru Dinulescu Yes, but I'm wondering where to put those in my CSS file and what to add (and where to add it) to my HTML file. Thanks, Daniel __ 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] Embedded SWF isn't linking
URL: http://www.studentremix.org/hs/media.htm CSS: http://www.studentremix.org/hs/hs.css The flash animation (top object in the sidebar on the right) is supposed to link to http://gallery.me.com/northsideyouth#gallery; when you click on it, but it's not doing anything when clicked on. It's not acting like a link at all. Any idea why? Thanks, Daniel Hammond Objective Designs 770-842-8817 [EMAIL PROTECTED] www.objectivedesigns.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Embedded SWF isn't linking
Daniel Hammond wrote: URL: http://www.studentremix.org/hs/media.htm CSS: http://www.studentremix.org/hs/hs.css The flash animation (top object in the sidebar on the right) is supposed to link to http://gallery.me.com/northsideyouth#gallery; when you click on it, but it's not doing anything when clicked on. It's not acting like a link at all. Any idea why? Lourens Thalen wrote: What you should do is place the transparent link on top of the flash animation. (presuming you can't fix the link in the flash file directly) Use position absolute to place it on top of the flashfile, give it the correct height and width. Do NOT forget to give a z-index to the object and embed tag, you can just use position: relative and z-index: 1;, this will do just fine. Problem is, flash always wants to be on top, tha's what's causing the problem atm. :) I'm sorry to seem like such a novice, but I haven't used absolute positioning or z-indexing before, so would you mind giving me the lines of code that I need to add to my files? Thanks, Daniel __ 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] Script disabling inline property in FF?
URL: http://www.studentremix.org/ms/blog.htm CSS: http://www.studentremix.org/ms/ms.css Here's a crazy situation: every tested browser (ie, safari, opera, chrome) EXCEPT firefox is displaying this page correctly. The column on the right is supposed to say Log in, but in FF3, the div for that column is moved down below the left column. This happened when I inserted the script code for the blog feed into the left column div. What's going on? Thanks, Daniel Hammond Objective Designs 770-842-8817 [EMAIL PROTECTED] www.objectivedesigns.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Script disabling inline property in FF?
URL: http://www.studentremix.org/ms/blog.htm CSS: http://www.studentremix.org/ms/ms.css Here's a crazy situation: every tested browser (ie, safari, opera, chrome) EXCEPT firefox is displaying this page correctly. The column on the right is supposed to say Log in, but in FF3, the div for that column is moved down below the left column. This happened when I inserted the script code for the blog feed into the left column div. What's going on? -Daniel Not sure exactly what's going on, but if you get rid of position:relative, it seems to fix it. Since it's floated left, you also don't really need the inline-block declaration. -Ray I got rid of position:relative, and it didn't change anything. -Daniel __ 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] Script disabling inline property in FF?
| Daniel Hammond wrote:
| URL: http://www.studentremix.org/ms/blog.htm
|
| The column on the right is supposed to say Log in, but in
| FF3, the
| div for that column is moved down below the left column.
|
| Can not tell you exactly what's bugging FF3, but it looks like another
| strange thing surrounding Gecko's handling of CSS table - not
| quite like
| the other browsers that support that property.
|
| Anyway, replacing...
| #content {display: table;}
| ...with...
| #content {overflow: hidden;}
| ...or some other expand to contain floats method, will fix it.
| regards
| Georg
That did the trick. Thank you so much!
Daniel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE margin issues
URL: http://www.studentremix.org/parents/media.htm CSS: http://www.studentremix.org/parents/parents.css When you hover over the photo thumbnails, there should be 15px of margin space below the highlighted blue background behind the photo captions. FF3, Opera, and Safari do this correctly. IE does not display any margin space there. The blue background color touches the top of the image below it. Any ideas as to why this is happening? Thanks, Daniel Hammond Objective Designs 770-842-8817 [EMAIL PROTECTED] www.objectivedesigns.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Horizontal scrolling in iframe
| URL: http://www.studentremix.org/test/ms/media.htm | CSS: http://www.studentremix.org/test/ms/ms.css | | | Perhaps something like this: | http://www.cssplay.co.uk/menu/photo_strip | | Cheers, | Gary Thanks so much, that works perfectly in all browsers tested except for IE7. It scrolls vertically now. I don't see what the difference between their code and mine is that would be causing the problem. Any ideas? Thanks, Daniel __ 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] Horizontal scrolling in iframe
| Daniel Hammond wrote:
| | You can use overflow-x and overflow-y properties separately,
| | instead of just overflow: scroll
| |
| | http://www.w3.org/TR/css3-box/#overflow
| |
| | It's been supported since Mozilla 1.8 and IE5. I think all
| | browsers support it even though it wasn't part of CSS2.1
| | specs (it will likely be in CSS3).
| |
| | Sounds like a topic for a blog post ;-)
| |
| | -Estelle
|
|
| Very good. I used overflow-x: scroll and it fixed the
| problem. Thanks very
| much for your help. Now about what you mentioned regarding
| the potential
| situation where I may not know the required width... Do you know of
| something that would work if that were the case?
|
| Thanks again,
| Daniel
|
| Re: http://www.studentremix.org/test/ms/media.htm
| For CSS this can only be done with media queries [1] [2].
|
| @media all and (min-width:800px) {
|iframe {overflow-x:hidden;overflow-y:hidden;}
| }
|
| This will only work in Safari and Opera.
|
| 1. http://www.w3.org/TR/css3-mediaqueries/
| 2. http://css-class.com/test/css/selectors/media/min-width1.htm
|
| Alan http://css-class.com/
Are you sure? This site: http://www.cssplay.co.uk/menu/photo_strip shows
exactly what I'm trying to do, and it's working beautifully in all the
browsers I've tested it in. I'm just trying to figure out why theirs works
in IE7 and mine doesn't. I don't see them using any media queries. Am I
missing something?
Thanks,
Daniel
__
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] Horizontal scrolling in iframe
| Is there a way to get rid of the faded out vertical scroll bar | that is not being used? | | | I assume you're seeing that in iExploder, right ? | overflow-x:hidden or overflow-y:hidden will hide the scrollbar you | don't want. | | Philippe Actually, I was seeing it in all browsers tested (FF3, Safari, Opera, and IE 6 7). The problem is solved now, though. Thanks, Daniel __ 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] Horizontal scrolling in iframe
| You can use overflow-x and overflow-y properties separately, | instead of just overflow: scroll | | http://www.w3.org/TR/css3-box/#overflow | | It's been supported since Mozilla 1.8 and IE5. I think all | browsers support it even though it wasn't part of CSS2.1 | specs (it will likely be in CSS3). | | Sounds like a topic for a blog post ;-) | | -Estelle Very good. I used overflow-x: scroll and it fixed the problem. Thanks very much for your help. Now about what you mentioned regarding the potential situation where I may not know the required width... Do you know of something that would work if that were the case? Thanks again, Daniel __ 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] Horizontal scrolling in iframe
URL: http://www.studentremix.org/test/ms/media.htm CSS: http://www.studentremix.org/test/ms/ms.css In the iframe, I want the photo thumbnails to scroll horizontally, not vertically as they do now. I want them to be in one row, only one thumbnail tall, if that makes sense. I wrapped them in a div (which has the royal blue background color for the sake of easy visibility/identification) and gave it a specific pixel-based height, but it still automatically expands vertically to hold the content instead of horizontally. I achieved this desired effect in the past, but I believe I did it with a table. I'd rather stick to pure CSS this time. Any ideas? Thanks, Daniel __ 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] Horizontal scrolling in iframe
| | URL: http://www.studentremix.org/test/ms/media.htm
| | CSS: http://www.studentremix.org/test/ms/ms.css
| |
| | In the iframe, I want the photo thumbnails to scroll horizontally, not
| | vertically as they do now. I want them to be in one row, only one
thumbnail
| | tall, if that makes sense. I wrapped them in a div (which has the royal
blue
| | background color for the sake of easy visibility/identification) and
gave it
| | a specific pixel-based height, but it still automatically expands
vertically
| | to hold the content instead of horizontally. I achieved this desired
effect
| | in the past, but I believe I did it with a table. I'd rather stick to
pure
| | CSS this time. Any ideas?
| |
| | Thanks,
| | Daniel
| |
|
| #iframePhotos {
| margin: 0 0 15px 25px;
| text-align: center;
| display: inline:
| }
|
| Worked for me...
| Karl
Really? That didn't do anything for me. Especially since I would think
something needs to be done with the photoThumbMainWrapper selector, not
the iframePhotos one. If you have a URL that you could provide that shows
it working how it should, that would be helpful. Thanks for the effort.
Daniel
__
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] Horizontal scrolling in iframe
| If you give the parent container a width to contain the
| horizontal elements, the iFrame will get a horizontal scroll bar.
|
| .photoThumbMainWrapper {width: 1685px;}
|
| That works if you know the number of thumbnails. Are you
| going to know the width? If not, let me know, and i'll help
| you further.
|
| -Estelle
|
| URL: http://www.studentremix.org/test/ms/media.htm
| CSS: http://www.studentremix.org/test/ms/ms.css
|
Thanks, that does help. However, I've now decided to use a div with
overflow:scroll to give the appearance of an iframe without actually using
an iframe. Is there a way to get rid of the faded out vertical scroll bar
that is not being used? Also, I am interested in hearing your suggestion for
if I do not know the number of thumbnails or width that the div needs to be.
Thanks for your help,
Daniel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE not recognizing block level element in nav?
URL: http://www.studentremix.org/test/ms/index.htm CSS: http://www.studentremix.org/test/ms/ms.css Tested on WinXP Pro: FF3, Opera 9.52, and Safari 3.1.2 display the navigation correctly, but IE 6 and 7 do not show the hover state until the cursor is hovering over the nav link's text itself, rather than just being over the area of the block level element. This hasn't happened in other sites I've made, but in comparing the different stylesheets, I don't see what the difference is. Also, IE 6 and 7 seem to add an unnecessary pixel of margin between the bottom of the nav links and the nav div's bottom border. In other words, the white background of the current nav link should touch the green single-pixel bottom border of the nav area, but instead, IE 6 and 7 show a small amount of the lighter green background color of the nav div area below the white. Any help on either of these issues would be much appreciated. Thanks, Daniel __ 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] bg img 1px too far to left or right in some browsers
URL: http://www.objectivedesigns.com/amittius/index.htm CSS: http://www.objectivedesigns.com/amittius/index.css (Tested only on WinXP Pro) Safari and Opera show the page's background image correctly regarding its position in relation to the rest of the site content (successfully centers everything nicely in the browser window), but FF3 has the background image one pixel too far to the left (or content too far to the right), and both IE's (6 and 7) have the background image one pixel too far to the right (or content too far to the left). Any idea why this is happening and how it can be fixed? (the problem can most easily be seen by looking at the left and right edges of the green navigation bar) Thanks, Daniel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE margin, padding, and .png issues
URL: http://www.objectivedesigns.com/amittius/white/index.htm CSS: http://www.objectivedesigns.com/amittius/white/index.css On Windows XP Pro... FF3, Opera 9.51, and Safari 3.1.2 display the site correctly. IE7 and IE6 don't. IE7 shows everything right except the padding on the links in the footer (it doesn't put padding on the bottom of the links, only the sides and the top). IE6 has this same problem, but it also doesn't correctly execute the margins of the light blue boxes that are within the body text. It pushes them too far away from the sides of the container. IE6 also seems to be unable to correctly display PNG images with semi-transparent pixels (the background images that appear around the header, container, and footer). Daniel Hammond 2227 Dunseath Avenue Atlanta, GA 30318 770-842-8817 www.objectivedesigns.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE margin, padding, and .png issues
| URL: http://www.objectivedesigns.com/amittius/white/index.htm | CSS: http://www.objectivedesigns.com/amittius/white/index.css | | On Windows XP Pro... FF3, Opera 9.51, and Safari 3.1.2 | display the site correctly. IE7 and IE6 don't. IE7 shows | everything right except the padding on the links in the | footer (it doesn't put padding on the bottom of the links, | only the sides and the top). IE6 has this same problem, but | it also doesn't correctly execute the margins of the light | blue boxes that are within the body text. It pushes them too | far away from the sides of the container. IE6 also seems to | be unable to correctly display PNG images with | semi-transparent pixels (the background images that appear | around the header, container, and footer). | | Try validate your CSS? | | IE6 doesn't support PNG's 256-levels of transparency. Other | folk on the list know what to do about that ... | | David Jones Alright, my CSS is valid. http://jigsaw.w3.org/css-validator/validator?profile=css21warning=0uri=htt p%3A%2F%2Fwww.objectivedesigns.com%2Famittius%2Fwhite%2Findex.htm I understand that IE6 just isn't going to show the transparent PNG's correctly. I'll either live with it or deal with it later. But what about the bottom padding of the links in the footer? Neither IE6 nor IE7 show that correctly. Daniel __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] IE margin, padding, and .png issues
| URL: http://www.objectivedesigns.com/amittius/white/index.htm | CSS: http://www.objectivedesigns.com/amittius/white/index.css | | On Windows XP Pro... FF3, Opera 9.51, and Safari 3.1.2 | display the site correctly. IE7 and IE6 don't. IE7 shows | everything right except the padding on the links in the | footer (it doesn't put padding on the bottom of the links, | only the sides and the top). IE6 has this same problem, but | it also doesn't correctly execute the margins of the light | blue boxes that are within the body text. It pushes them too | far away from the sides of the container. IE6 also seems to | be unable to correctly display PNG images with | semi-transparent pixels (the background images that appear | around the header, container, and footer). | | Try validate your CSS? | | IE6 doesn't support PNG's 256-levels of transparency. Other | folk on the list know what to do about that ... | | David Jones Alright, my CSS is valid. http://jigsaw.w3.org/css-validator/validator?profile=css21warning=0uri=htt p%3A%2F%2Fwww.objectivedesigns.com%2Famittius%2Fwhite%2Findex.htm I understand that IE6 just isn't going to show the transparent PNG's correctly. I'll either live with it or deal with it later. But what about the bottom padding of the links in the footer? Neither IE6 nor IE7 show that correctly. Daniel __ 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] horizontal nav not placing correctly
| URL: www.objectivedesigns.com/amittius/index.htm
| CSS: www.objectivedesigns.com/amittius/index.css
|
| I've tested it in (all WinXP) FF3, IE7, IE6, Opera 9.5, and Safari
| 3. They
| all display the navigation correctly except Safari. I want the nav
| buttons
| to touch the bottom of the nav area, but they don't quite
| go to the
| bottom
| in Safari. I also haven't tested this on a Mac, so if anyone could
| do that
| for me, that would be great (thanks in advance). What's
| more pressing,
| though, is why does Safari display it incorrectly while all
| the others
| display it correctly?
|
| Adding
| #nav a, #nav strong {vertical-align:bottom}
| should level off the differences.
|
| Incidentally, Gecko1.8.1/Fx 2 has no support of display:inline-block;
|
| Philippe
Alright, I added {vertical-align:bottom}. Does this help any of you Mac
users see it better where it was messing up before?
Daniel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] IE margin problems
URL: www.objectivedesigns.com/amittius/index.htm CSS: www.objectivedesigns.com/amittius/index.css Alright, thanks for all your help with the nav on this site. Now if you'll go there again, you'll see that I have added some boxes within the body text. FF3, Opera, and Safari all display the boxes correctly. IE6 and IE7 do not. It looks as though they are having some trouble reading the margin properties correctly (both for the boxes themselves and for the unordered list in the box on the right side. Any help in making them look like they do in the better browsers would be much appreciated. Daniel Hammond 2227 Dunseath Avenue Atlanta, GA 30318 770-842-8817 www.objectivedesigns.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] horizontal nav not placing correctly
| Daniel Hammond wrote:
| URL: www.objectivedesigns.com/amittius/index.htm
| CSS: www.objectivedesigns.com/amittius/index.css
|
| why does Safari display it incorrectly while all
| the others
| display it correctly?
|
| Hi Daniel--
|
| Try this:
| #nav {
| font-family: Trebuchet MS;
| margin: 0;
| padding: 0;
| width: 750px;
| /*height: 28px; REMOVE */
| background: #886;
| font-size: 13px;
| font-weight: bold;
| color: #fff;
| text-align: center;
| }
| #nav a, #nav strong {
| display:inline-block; /* ADD */
| padding: 2px 25px 3px 25px;
| border: 1px solid #eee;
| border-bottom: 0;
| color: #fff;
| text-decoration: none;
| position: relative;
| }
|
| That should work for all browsers with your current code.
| Safari wasn't
| the only one incidentally...Firefox 3/Ubuntu was showing it
| the same as
| Safari...with the extra spacing produced from the height
| setting on your
| #nav element.
|
| Hope it helps.
| --Bill
Thanks Bill. That did help. Now could anyone please test it on a mac, just
to make sure it's working well there, too? Thanks much.
Daniel
__
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] horizontal nav not placing correctly
| URL: http://www.objectivedesigns.com/amittius/index.htm | CSS: www.objectivedesigns.com/amittius/index.css | | Daniel, | | I looked at your site in Firefox on a Mac. The nav buttons (Home, | Link 2, etc.) extend below the bottom of the nav area in my display. | This isn't obvious unless you put the cursor on one of the link | buttons. When the button background turns brown, you can see that the | bottom of the button extends below the nav area. | | I then looked at it in Safari, and the nav buttons extend just to the | bottom of the nav area, they do NOT extend below. | | Bill Does anyone know how I might fix this problem? Thanks, Daniel __ 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] horizontal nav not placing correctly
URL: www.objectivedesigns.com/amittius/index.htm CSS: www.objectivedesigns.com/amittius/index.css I've tested it in (all WinXP) FF3, IE7, IE6, Opera 9.5, and Safari 3. They all display the navigation correctly except Safari. I want the nav buttons to touch the bottom of the nav area, but they don't quite go to the bottom in Safari. I also haven't tested this on a Mac, so if anyone could do that for me, that would be great (thanks in advance). What's more pressing, though, is why does Safari display it incorrectly while all the others display it correctly? Thanks, Daniel Hammond 2227 Dunseath Avenue Atlanta, GA 30318 770-842-8817 www.objectivedesigns.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Layout problem in IE6
URL: http://rsdesignandprint.com/5619lakeforrest/index.html CSS: http://rsdesignandprint.com/5619lakeforrest/index.css The site looks great in every browser except IE6. I figure it's just reading the padding or margins differently than the other browsers. I really don't want to change those attributes to please IE6; is there a fix for it that will make it read it better? Thanks, Daniel __ 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] browser combatibility issues
| Microsoft told Mac users in January 2006 to stop using IE for | the Mac. | You can't even download it from Microsoft anymore. Now it breaks | sites. It crashes computers and causes kernel panics. No one | is using | (or should be using) IE for the Mac. | | What do your stats say about IE Mac users using that particular | browser to view your sites? I'm betting it's about 0%. Will your | client pay you to code for something that no one is using? | | Theresa Mesa Duly noted. Thanks. The only issue now is the site's footer as it is displayed in IE6. It doesn't stick to the bottom of the page as it should. There should be an easy enough fix for this, correct? URL: http://www.objectivedesigns.com/rsdp/nwc/ CSS: http://www.objectivedesigns.com/rsdp/nwc/index.css Thanks again for all of your continued help on this stuff. Daniel __ 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] browser combatibility issues
| I don't have IE 5 on the Mac and there is no IE 6 or 7, so no | worries | there. | Good luck. | Zack Frazier Can someone please take a look at the site in IE on a mac and offer some guidance as to why it's messing up the site's layout so badly? Just a reminder, the url is http://www.objectivedesigns.com/rsdp/nwc/, and the css is http://www.objectivedesigns.com/rsdp/nwc/index.css. That browser/platform is having some major page layout issues. If you click around to the different pages, you'll see what I'm talking about. Thanks, Daniel __ 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] browser combatibility issues
URL: http://www.objectivedesigns.com/rsdp/nwc/photos.html CSS: http://www.objectivedesigns.com/rsdp/nwc/index.css FF (mac+pc) and Opera (pc [haven't tested on mac]) displays the semi-transparent properties of the photo thumbnails correctly, but Safari (mac+pc) shows the rollover state incorrectly, and IE7 (pc [haven't tested on mac]) doesn't show the semi-transparent property at all. Also (this isn't as big of a problem, but a problem nonetheless), IE7 doesn't show the border-bottom on the rsdesignandprint.com link in the footer of all the pages. Any help would be appreciated, and if anyone could test the site in Opera (mac), IE (mac), and IE6, that would be fantastic. Thanks much. And again, use FF as the standard for how it should behave. Daniel Hammond 2227 Dunseath Avenue Atlanta, GA 30318 770-842-8817 www.objectivedesigns.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] browser combatibility issues
| 1) The height of your anchor is being computed to 12px even
| though the
| image is larger. This fixes the problem by forcing the anchor
| to wrap
| around the whole image ...
|
| photo_v a {
| display: block;
| }
Thanks, that fixed it in Safari. IE still ignores it altogether, but I guess
that's ok.
Daniel
__
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] div background opacity
Is there a way to reduce the opacity of the background color of a div to a percentage less than 100%, but not completely transparent? 50% for example. Daniel Hammond 2227 Dunseath Avenue Atlanta, GA 30318 770-842-8817 www.objectivedesigns.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] div background opacity
| Is there a way to reduce the opacity of the background color | of a div to a percentage less than 100%, | but not completely transparent? | 50% for example. | Daniel Hammond | yes there is a way: | check this out: | http://www.w3schools.com/css/css_image_transparency.asp | Nina.. Thanks, that's almost exactly what I need. The only problem is that it also makes the text transparent. I want the text to remain at 100% opacity. Daniel __ 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] iframes - who still uses them
| Ross wrote: | Does anyone still use frames or iframes? Is it a valid | development technique? | Depending upon what you are doing with them, an iframe may be | the only | way to achieve a desired effect. Say, you want a webpage with | a section | of the page that tells you in big, blue letters that you have a new | personal message. Fine, now add the caveat that you want it | to display | when you have a new message without making your end user | refresh their | page. Now you need an iframe with javascript to make it | refresh every so | often so that ITs information will be current but your user can still | browse at their leisure. | | There must be other uses for them, but I've never really run into a | project that I had to use them. I use iframes on my website to display my photography work: www.objectivedesigns.com/photography.htm. I prefer it to making the links go to entirely different pages or opening in new windows. Daniel Hammond 2227 Dunseath Avenue Atlanta, GA 30318 770-842-8817 www.objectivedesigns.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] CLICK ON THUMBNAIL TO SHOW LARGER IMAGE ON THE SIDE
|snipped a bit | | I should like to create a gallery show where you click on the thumbnail to | show larger image on the side, using css. | Any help towards that? you can use iframes to get your desired effect. no javascript needed. just css and html. you can see how i've used it on my photography page: www.objectivedesigns.com/photography.htm let me know if you need any more assistance than what exploring my code gives you. Daniel Hammond 2227 Dunseath Ave. Atlanta, GA 30318 770-842-8817 www.objectivedesigns.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] Photos not staying in div, and lightbox issues
| Why aren't my photos staying in the content div? I've colored the
| background of the div green so you can see where it is.
|
| Decent browsers won't contain floats unless they are told to.
|
| #content {float: left;}
| ...will be a suitable containment-command in your case, since floats
| with default height (no height) will always contain floating children.
|
| URL: www.objectivedesigns.com/2/photography.htm
|
| regards
| Georg
Thanks Georg, that fixed that problem. Now does anyone have any light to
shed on the lightbox issue? That part of my original message has been
clipped, so I'll repeat it here:
I'm trying to use the lightbox technique
(http://www.huddletogether.com/projects/lightbox2/) for viewing the images
full-size, but it's not working correctly. I've only coded the first (top
left) image for lightbox, so don't worry about the rest of them right now.
URL: www.objectivedesigns.com/2/photography.htm
CSS: www.objectivedesigns.com/2/index.css
Daniel Hammond
2227 Dunseath Ave.
Atlanta, GA 30318
770-842-8817
www.objectivedesigns.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] Photos not staying in div, and lightbox issues
Why aren't my photos staying in the content div? I've colored the background of the div green so you can see where it is. I'm also trying to use the lightbox technique (http://www.huddletogether.com/projects/lightbox2/) for viewing the images full-size, but it's not working correctly. I've only coded the first (top left) image for lightbox, so don't worry about the rest of them right now. URL: www.objectivedesigns.com/2/photography.htm CSS: www.objectivedesigns.com/2/index.css Daniel Hammond 2227 Dunseath Ave. Atlanta, GA 30318 770-842-8817 www.objectivedesigns.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] Columns filling vertical space
I'm using the following technique to lay out a page: http://blog.html.it/layoutgala/LayoutGala13.html. How do I make the left (blue) and right (orange) columns extend fully to the footer, even if they just have a little bit of information in them? Daniel Hammond MotorcycleCarbs.com, Inc. www.motorcyclecarbs.com -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.446 / Virus Database: 269.5.4/768 - Release Date: 4/19/2007 5:32 AM __ 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] Centering into the browser
| Dave Pierce wrote: | Hello Gurus of Great Graphics, | | Can someone take a look at this page (I finally got to do one from | scratch instead of updating old stuff! ;-) | http:www.pierceartanddesign.com/testfiles/ and perhaps point me in | the right direction to get the page centered into the | browser window? | I tried the method described here http://www.bluerobot.com/web/css/ | center1.html but it didn't seem to work. | | Lori wrote: | It appears that you have the wrapper margin written incorrectly. The | order kind of spells TRouBLe - that's TOP, RIGHT, BOTTOM, LEFT, or | counter-clockwise from the top. So your wrapper margin should be: | margin: 0 auto 0 auto; | This can be shortened to: | margin: 0 auto; | Lori Yes -- top, right, bottom, left -- which is clockwise, not counter-clockwise. Daniel Hammond 2227 Dunseath Ave. Atlanta, GA 30318 770-842-8817 www.objectivedesigns.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] Centering into the browser
| Daniel Hammond wrote: | Yes -- top, right, bottom, left -- which is clockwise, not | counter-clockwise. | | | Beg your pardon. Too many digital clocks :-) | | L No worries. Just making sure everything is clear for everyone :) Daniel Hammond 2227 Dunseath Ave. Atlanta, GA 30318 770-842-8817 www.objectivedesigns.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] Fixex/fluid column issues
I have a page where the left column is the navigation with a fixed width in pixels, and the content to the right of it is fluid in its width. I tried following these guidelines: http://blog.html.it/layoutgala/LayoutGala31.html. Here is my URL: http://www.objectivedesigns.com/other/mcc/default1.htm. And the CSS: http://www.objectivedesigns.com/other/mcc/css/2col_leftNav1.css. The problem I'm having is that the content protrudes out to the right what seems to be the same amount of space that the navigation is taking up on the left. I simply want the content to extend to the right side of the browser window instead of out of the bounds of the window. Daniel Hammond 2227 Dunseath Ave. Atlanta, GA 30318 770-842-8817 www.objectivedesigns.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] Content height nav issues
Alright, I've got quite the unusual situation here... After testing my site in FF2, Opera, IE7, and IE6, the only browser that displays it correctly is IE6! FF2 and Opera show the navigation correctly, but the side borders of the container don't extend all the way to the bottom of the browser window when there is enough content to require scrolling. IE7 shows the side borders correctly, but it messes up the navigation. Here's the url: www.objectivedesigns.com/2 And the css: www.objectivedesigns.com/2/index.css Daniel Hammond 2227 Dunseath Ave. Atlanta, GA 30318 770-842-8817 www.objectivedesigns.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] Content height nav issues
| FF2 and Opera show the navigation correctly, but the side | borders of the | container don't extend all the way to the bottom of the | browser window when | there is enough content to require scrolling. | | IE7 shows the side borders correctly, but it messes up the navigation. I used overflow:hidden to fix the side borders in FF and Opera, but that made it so IE6 doesn't scroll at all. I'm also still looking for a way to fix the navigation in IE7. Daniel Hammond 2227 Dunseath Ave. Atlanta, GA 30318 770-842-8817 www.objectivedesigns.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] Content height nav issues
| Daniel Hammond wrote:
| I used overflow:hidden to fix the side borders in FF and Opera, but
| that made it so IE6 doesn't scroll at all.
|
| * html #container {
| height: 100%;
| overflow: visible;
| }
|
| ...will work fine.
You're the best, Georg. Now how about that navigation?
Daniel Hammond
2227 Dunseath Ave.
Atlanta, GA 30318
770-842-8817
www.objectivedesigns.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] Browser alignment differences
Here's the URL: www.objectivedesigns.com/2 Everything is correct in FF and Opera, but IE shifts the container/header one pixel to the left. You can see it if you look closely and compare the edges in relation to the background gradients. Also, I want the black left and right borders of the container to extend all the way to the bottom of the screen. Would that be a min-height issue? Daniel Hammond 2227 Dunseath Ave. Atlanta, GA 30318 770-842-8817 www.objectivedesigns.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] Browser alignment differences
| ...place your text-align: center | declaration on the body, not on the container. (That is, I | think you intend to use this to correctly center your layout | for IE 5. If that's the case, put it on the body element | instead.) That *might* fix your problem. | | ...shrink the image by two pixels, and | bring your border inside the body background image | ...overlapping like this makes things unnecessarily | complicated and might also be contributing to this problem | you're seeing in IE. Sadly, none of that did anything to fix the problem. Any ideas on making the container extend down to 100% of the vertical space? Daniel Hammond 2227 Dunseath Ave. Atlanta, GA 30318 770-842-8817 www.objectivedesigns.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] Browser alignment differences
| Try adding...
| html, body {height: 100%;}
| #container {min-height: 100%;}
| * html #container {height: 100%;}
| ...and restyle the background to avoid visible overflow...
| html, body {background: #fff url(../images/bg.jpg) center repeat-y; }
Perfect. That took care of both of my issues. Thanks so much, Georg.
Daniel Hammond
2227 Dunseath Ave.
Atlanta, GA 30318
770-842-8817
www.objectivedesigns.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] IE pampering
| Chris Williams wrote: | How right you are, let's just blow off over 80% of the | market. And let's tell other people how to live their lives. | Next step, a master race! | | From: Phil Turner [EMAIL PROTECTED] | Subject: [css-d] IE pampering | | recommending which browsers to use and start steering | people away from | IE instead of pampering to their needs like spoilt children I smell an administrative off topic email coming soon... Daniel Hammond www.objectivedesigns.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] Firefox 2 released
Many of you may already know, but for those of you who don't yet, here's a friendly heads up: Firefox 2 has been released: www.mozilla.com/firefox Daniel Hammond www.objectivedesigns.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] Large gap
URL: www.objectivedesigns.com If you go to the photography page and scroll about 2/3 of the way down through the photo thumbnails, you'll see that in IE6, there's a big gap of emptiness. Any idea why this is happening? Thanks in advance. Daniel Hammond www.objectivedesigns.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/
Re: [css-d] Large gap
| URL: www.objectivedesigns.com | | If you go to the photography page and scroll about 2/3 of the way | down through the photo thumbnails, you'll see that in IE6, | there's a | big gap of emptiness. Any idea why this is happening? | | Woks fine for me on IE6/7, Opera, FF. | 42 pics all there. Well this is strange. In a good way though. The problem seems to have fixed itself. BUT, there are still problems with my new site: www.objectivedesigns.com/2/photography.htm. If this one doesn't choose to magically fix itself before you guys get a chance to take a look at it, you should see what's going on there (tested in firefox, opera, and IE 6 and 7. FF and opera display correctly, but the IE's are the ones that show the problem). Daniel Hammond www.objectivedesigns.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-d] No bottom margin
Why is there no margin space at the bottom of my site? URL: www.objectivedesigns.com/2/index.htm CSS: www.objectivedesigns.com/2/index.css I want there to be the same 20px at the bottom that there is at the top. You may need to reduce the size of your browser window and scroll down to the bottom to see what I'm talking about. Daniel Hammond www.objectivedesigns.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/
Re: [css-d] No bottom margin
| Why is there no margin space at the bottom of my site? | | URL: www.objectivedesigns.com/2/index.htm | | CSS: www.objectivedesigns.com/2/index.css | | I want there to be the same 20px at the bottom that there | is at the top. | You may need to reduce the size of your browser window and | scroll down | to the bottom to see what I'm talking about. | | Haven't a clue what you mean here, Daniel. | | Even reducing size of window and scrolling down it just looks | the same. | Where exactly do you want the margin space? | | Ian Ok it looks right in IE 6 and 7, but firefox and opera show what I'm talking about. Daniel Hammond www.objectivedesigns.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/
Re: [css-d] No bottom margin
| Sorry about the earlier response. Not awake yet. | Adding | Overflow:hidden; | To the #container should solve the problem. | Only tested in IE6 and FF1.5 | Dennis Bixler | | -Original Message- | From: Daniel Hammond | Why is there no margin space at the bottom of my site? | URL: www.objectivedesigns.com/2/index.htm | CSS: www.objectivedesigns.com/2/index.css | I want there to be the same 20px at the bottom that there is | at the top. | You may need to reduce the size of your browser window and | scroll down to the bottom to see what I'm talking about. Perfect. Thank you, sir. Daniel Hammond www.objectivedesigns.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-d] Weird empty space
Why is there empty space above the content_text div at www.objectivedesigns.com/2/? I can't seem to get rid of it. (I have colored the background of the content div green so you can easily see what I'm talking about.) Daniel Hammond www.objectivedesigns.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-d] Weird empty space
You guys will be proud of me. I'm reconstructing my site to be pure CSS. No tables and no iframes. URL: www.objectivedesigns.com/2/index.htm CSS: www.objectivedesigns.com/2/index.css But I'm having some problems: Why is there empty space above the content_text div? I can't seem to get rid of it. (I have colored the background of the content div green so you can easily see what I'm talking about.) Also, why is there no margin space below the site at the bottom of the page? (You may need to reduce the size of your browser window and scroll down to the bottom to see what I'm talking about.) I want there to be the same 20px at the bottom that there is at the top. Daniel Hammond www.objectivedesigns.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/
Re: [css-d] Any problems with list?
| Anyone know if there's a problem with the list? I've only | started getting emails again today (Thursday) and previously | haven't got any since Monday. | Same for everyone or just me? | Eoin. Same for everyone. Daniel Hammond www.objectivedesigns.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/
Re: [css-d] Stupid Question re: Outlined Link Image in IE6
| On my fledgling site (www.champeauservices.com) I have my | logo at the top, which is an img within an a that will | serve as a Home button. In Safari it looks the way I expect | it to, but in IE6 Windows, it has a purple border (presumably | indicating that the logo is a link). In addition to the | border, IE6 also puts extra spacing around the logo. I've | tried a variety of CSS rules to force the border and spacing | to go away, but to no avail. Does anyone know what I should do? | | Thanks, | Dean To get rid of the border, put border=0 in your image tag. Like this: img src=http://www.champeauservices.com/images/logo.gif; border=0 Daniel Hammond www.objectivedesigns.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/
Re: [css-d] IE6 vs Firefox 1.7
| I'm building a site using only css. This is my first try and | I'm a newbie at web design. I have managed to set up my h1 | and h2 heading and line them up properly in ie6. In firefox, | my subheading goes to the far left, while my h1 stays exactly | where it should be. What I'm I doing wrong? Please help the newbie! Can you send us a link so we can see what you're looking at? Daniel Hammond www.objectivedesigns.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/
Re: [css-d] IE6 problem
| Daniel Hammond wrote:
| www.meowmeowdesigns.com/site
| www.meowmeowdesigns.com/site/index.css
|
| Works correctly in FF, IE7, and Opera. IE6 messes it all up though.
| See if IE6.0 is more cooperative if you change the
| padding-right on these three selectors from 100% to 0.
| a.nav:link, a.nav:visited { padding: 10px /*100%*/0 5px 15px; }
| a.nav:hover { padding: 10px /*100%*/0 5px 15px; }
| a.nav:active { padding: 10px /*100%*/0 5px 15px; }
| Aside: Points are not used to set fonts for the screen. There
| are eight or nine pages on the list wiki regarding
| font-sizing methods, beginning with this page:
| http://css-discuss.incutio.com/?page=FontSize
| Best,
| ~dL
Alright I changed the font sizes to percents/ems and changed the right
padding to 0, but that change in padding makes it behave how I don't want it
to. I want the entire width of the button area to be clickable and change
color when hovered over.
PS: The site's color change to black was a decision made by the client.
Daniel Hammond
www.objectivedesigns.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/
Re: [css-d] Link Classes
Try making a class for your regular text links.
Example:
a.link:link {
...
}
a.link:visited {
...
}
Etc etc.
Or you could try adding:
border: 0;
...to your image links.
Daniel Hammond
www.objectivedesigns.com
| -Original Message-
| From: [EMAIL PROTECTED]
| [mailto:[EMAIL PROTECTED] On Behalf Of Jason Ogle
| Sent: Friday, September 15, 2006 1:13 PM
| To: css-d@lists.css-discuss.org
| Subject: [css-d] Link Classes
|
| Hi there,
|
| I'm feeling a little dim-witted and I think I need a
| refresher from the helpful CSS crew.
|
| Please visit www.finelineelectric.com/test/projects.htm
|
| My main links (a:) have a border 1px dotted underneath them.
| I tried creating a pseudo-class for the images on the page
| mentioned without the border on the hover class, but it's
| still being overridden by my main a:
| class. Any help or sharp jab in my chops would actually be
| appreciated.
|
| Thanks!
|
| : jason a. ogle
| : graphic artist
| : Atomic(urve
| : www.atomiccurve.com
|
| P.s. I'm on digest and would be thrilled with a direct email
| to me as well.
|
|
| __
| 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] I'm sorry.
Sorry about that last email, folks. I know I forgot to format it correctly to fit the list's standards. Daniel Hammond www.objectivedesigns.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-d] IE6 problem
www.meowmeowdesigns.com/site www.meowmeowdesigns.com/site/index.css Works correctly in FF, IE7, and Opera. IE6 messes it all up though. Suggestions, please. Thanks in advance. Daniel Hammond www.objectivedesigns.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/
Re: [css-d] Framing my menu (for horizontal scrolling photo gallery)
| Now that I've got my navigation menu sorted out for some of | the main browsers (FF, Safari, Opera, and IE6 PC), I'd like | to use CSS to emulate a frame. | http://www.richardnicholson.com/testing/menu_with_frames/editorial.html | What else do I need to add to get it working in IE6 PC? Just so you know, it works correctly in IE7 PC. Daniel Hammond www.objectivedesigns.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/
Re: [css-d] side-scrolling portfolio website - best technique?
| Apparently the scrolling gallery doesn't work in Firefox | 1.5.0.6 on a PC. I wonder why, as it works fine in Firefox | 1.5.0.6 on my Mac? | http://www.richardnicholson.com/testing/list_text.html I'm running Firefox 1.5.0.6 on a PC, and the sidescrolling seems to be working fine. It also works in Opera. But IE7 wraps everything down into a column. However, there seems to be some extra unnecessary white space above all the content, and that makes it so you have to scroll up and down just a bit in order to see everything (I'm using 1280x800 resolution, so this problem would also be present for people with 1024x768). Is the white space intentional? If so, why? Daniel Hammond www.objectivedesigns.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/
Re: [css-d] Horiz scrollbar in IE
Hide the horizontal overflow on the html-element in photothumbs.htm
- and any other page IE6 has problems with, and the problem is solved.
* html {overflow-x: hidden}
Alright, we're halfway there. That got rid of the horizontal bar, but the
styling is still not there. Also, for some weird reason, IE7 doesn't let me
scroll up and down in that window with my mouse's scroll wheel now.
Daniel Hammond
www.objectivedesigns.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/
Re: [css-d] Horiz scrollbar in IE
No wonder. You must not let IE7 see that style on the html element - that's what the 'star html' hack is there for. The horizontal bar was still there when I had the star in the code (as it is now). Daniel Hammond www.objectivedesigns.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/
Re: [css-d] Horiz scrollbar in IE
Is the page also triggering *standard compliant mode* ? Otherwise IE7 is just a slightly upgraded IE5.x, and will see - and use - every hack that's ever created for those old versions - including the 'star html' hack. Yes, it is triggering standards compliance mode. I see that the h-bar has been removed in IE6. Putting all this h-bar stuff aside, is there a way to make the bar's styling show up? If not, I'll just go ahead and get rid of the doctype altogether, and we can be done with this discussion. I assume it won't be a big problem if I remove the doctype since it's just a frame that loads in an iframe, thus I'm not worried about having it come up in search engines. Daniel Hammond www.objectivedesigns.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-d] Nav's top borders not showing up in IE
I've raised this issue before, but it was lost in a discussion of tables, iframes, and validation. I've since validated my markup, so maybe someone can help me now. www.southpawbrothers.com FF and Opera show the navigation as it should be. IE doesn't show the top borders on the links. How can this be fixed? Daniel Hammond www.objectivedesigns.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-d] Horiz scrollbar in IE
If you go to www.objectivedesigns.com and click the photography link, you will see that in IE, an unnecessary horizontal scrollbar is put on the iframe that holds the thumbnails. The only thing that I know will fix this is to remove the page's doctype, but obviously that's not really an option. Also, the styling for the scrollbar itself will not show up in IE or Opera. How can I get rid of the horizontal scrollbar and make it so the scrollbar's styling shows up? Daniel Hammond www.objectivedesigns.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/
Re: [css-d] Horiz scrollbar in IE
Daniel, Iframes only allow scrolling or no scrolling as you know so the only way to eliminate the horizontal scroll bar is to either make the iframe wider or reduce the width of the included page. There appears to be extra space on the right side so make the contents narrow. The iframe could be made wider without causing any problems. Don Don, There is nothing on the page that loads in the iframe that would cause any content to be wider than the iframe itself. Here is a direct link to that page: www.objectivedesigns.com/photothumbs.htm. Here is the CSS that styles that page: www.objectivedesigns.com/pages_photos.css. If the content was vertically short enough so that there would be no vertical scrollbar, then there would be no horizontal scrollbar either (example: the news page). The horizontal one only shows up when the vertical one does. It seems like it thinks that the vertical one is covering up that much space on the page, so it provides the ability to scroll over to see that little bit of nothingness that is supposedly being covered up. Daniel Hammond www.objectivedesigns.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-d] ul issues
Can someone tell me why on www.lyteenterprises.com/services.htm, the lists of services are moved down an extra line in FF and Opera, and they are moved over to the right in IE? Daniel Hammond www.objectivedesigns.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/
Re: [css-d] ul issues
Very good. Thank you, sir.
Daniel Hammond
www.objectivedesigns.com
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of
Bradley Wright
Sent: Wednesday, August 30, 2006 9:39 AM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] ul issues
Actually make that:
margin: 0;
Which should reset all the margins on the list.
On 30/08/2006 14:37, Bradley Wright wrote:
On 30/08/2006 14:25, Daniel Hammond wrote:
Can someone tell me why on
www.lyteenterprises.com/services.htm, the
lists of services are moved down an extra line in FF and
Opera, and
they are moved over to the right in IE?
It's the margin of the ul. Try this:
.multicolumn {
float: left;
list-style: none;
margin-left: 0;
padding: 0 40px 0 0;
}
__
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-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] Firefox Ignoring Link Styles
Doh, I figured it out the moment I hit send. IE and Safari are more forgiving of spelling. Visited spelled correctly helps Firefox display correctly. Sorry everyone! Not a problem, glad you figured it out :) Daniel Hammond www.objectivedesigns.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/
Re: [css-d] Nav borders
Daniel Hammond wrote: On www.southpawbrothers.com, the top borders of the navigation links show up in Firefox (as they should), but they don't show up in IE. Why? Daniel Hammond Probably a combination of things is causing that specific problem, but there are other issues too: Although your css is valid, the markup is not (always a good idea to validate before posting). - id's are unique, they can only be used once on a page (you have used #nav several times) - you have no doctype, consequently ie is in quirksmode, and rendering even among the compliant browsers may be different - you are using proprietary html in the table - and you are using i-frames (which complicates things a little) I'm checking the validation of my markup, and it's telling me that there is no attribute height. As you can see on www.southpawbrothers.com/index2.htm, if I remove the height tag from the invisible table that encompasses all of the site's content, it obviously moves everything to the top of the browser window. Is there a way, without using height, to keep the look (www.southpawbrothers.com/index.htm) that I want, with the content centered vertically as well as horizontally in the browser? Also, how would I keep the hover action on the nav links as they are in the ...index.htm file without using the div tags the way that I did? Another thing: what do you mean by proprietary html? Daniel Hammond www.objectivedesigns.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-d] Nav borders
On www.southpawbrothers.com, the top borders of the navigation links show up in Firefox (as they should), but they don't show up in IE. Why? Daniel Hammond www.objectivedesigns.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/
