Re: [css-d] css interference
On Tue, 2 Jun 2009 22:12:43 -0400, Delos Woodruff wrote: | | On Jun 2, 2009, at 8:52 PM, David Hucklesby wrote: | | No need to recode the site! The incomplete HTML 4 DOCTYPE puts | browsers into quirks mode. Nothing to do with XHTML code - which is | treated as HTML by browsers anyway. | | Give your pages a complete DOCTYPE, including the DTD declaration, | and you are good to go: | | http://www.w3schools.com/tags/tag_DOCTYPE.asp | | FWIW - browser quirks mode differs from standards mode in very few | ways, with the exception of Internet Explorer. In that browser | (alone) all versions behave like version 5.5. | | | Well, that's a relief. I had been wondering if I could find a plain | english doctype standards declaration somewhere. The whole site is | full of tables - nested and nested through and through - and I | imagined that the errors would be excessive. See also http://hsivonen.iki.fi/doctype/ -- David Postill Dance your Life - Biodanza in Holland - http://www.danceyourlife.eu __ 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] css interference
David, Aha! I had posted http://checkitlocal.com/sample.htm but I went ahead and fixed all the little validation errors in the html and I switched the doctype to what the site itself uses just to be thorough. Apparently, the !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN does not allow for the hover effect. When I put back in the !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional// EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; html xmlns=http://www.w3.org/1999/xhtml; xmlns:v=urn:schemas-microsoft-com:vml xmlns:o=urn:schemas-microsoft-com:office:office, it works like intended. So it looks like my solution is to recode the site into the second doctype and fix all the errors. I never use anything but that latter doctype, so it didn't occur to me to even look there. Thank you very much (everyone) for all your help. -Delos On May 31, 2009, at 12:50 AM, David Laakso wrote: I dunno. Your css snippet appears to be valid. Your markup snippet appears not to be valid. Perhaps you might put the page/site on a public server. And provide a clickable link to it in your post to the list? __ 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] css interference
Delos Woodruff wrote: David, Aha! I had posted http://checkitlocal.com/sample.htm but I went ahead and fixed all the little validation errors in the html and I switched the doctype to what the site itself uses just to be thorough. Apparently, the !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN does not allow for the hover effect. When I put back in the !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional// EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; html xmlns=http://www.w3.org/1999/xhtml; xmlns:v=urn:schemas-microsoft-com:vml xmlns:o=urn:schemas-microsoft-com:office:office, it works like intended. So it looks like my solution is to recode the site into the second doctype and fix all the errors. No need to recode the site! The incomplete HTML 4 DOCTYPE puts browsers into quirks mode. Nothing to do with XHTML code - which is treated as HTML by browsers anyway. Give your pages a complete DOCTYPE, including the DTD declaration, and you are good to go: http://www.w3schools.com/tags/tag_DOCTYPE.asp FWIW - browser quirks mode differs from standards mode in very few ways, with the exception of Internet Explorer. In that browser (alone) all versions behave like version 5.5. Cordially, David (a different David) -- __ 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] css interference
On Jun 2, 2009, at 8:52 PM, David Hucklesby wrote: No need to recode the site! The incomplete HTML 4 DOCTYPE puts browsers into quirks mode. Nothing to do with XHTML code - which is treated as HTML by browsers anyway. Give your pages a complete DOCTYPE, including the DTD declaration, and you are good to go: http://www.w3schools.com/tags/tag_DOCTYPE.asp FWIW - browser quirks mode differs from standards mode in very few ways, with the exception of Internet Explorer. In that browser (alone) all versions behave like version 5.5. Well, that's a relief. I had been wondering if I could find a plain english doctype standards declaration somewhere. The whole site is full of tables - nested and nested through and through - and I imagined that the errors would be excessive. Thanks for the link! -Delos __ 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] css interference
In addition to my site being a smidge too wide, I have a more
important issue to worry about. Does php somehow interfere with css
statements? I am trying to create a tab nav like you find at
http://www.cssplay.co.uk/menu/one_page
I have the code working perfectly on a test html page at home. When I
upload it (with the php code that shows the reviews, etc of the
individual listings) to the site, it displays the default div but does
not show the hidden divs when hovering over the tabs. (The site is
checkitlocal.com/index.php and a copy of the css file is at
checkitlocal.com/css.css)
Here's the relevant css code as I've modified it:
---
.tabborder {height:600px;width:800px;}
.listingdefault {background:#ff;height:auto;width:55%;padding:3%;}
.listingbox {border:#cdcdcd solid 1px;margin:1px 0 0 0;height:
605px;width:805px;}
.listing {background:#ff;height:auto;width:55%;padding:3%;}
.extras {width:30%;float:right;padding:3%;}
/* set up the overall width of the menu div, the font and the margins
with a relative position*/
.menu { position:relative;width:100%;z-index:100;clear:both;}
/* remove the bullets and set the margin and padding to zero for the
unordered list */
.menu ul.tab {padding:0;margin:0;margin:0;list-style:none;}
/* float the list so that the items are in a line */
.menu ul.tab li.tab {float:left;width:auto;}
/* style the tabs. */
.menu ul.tab li.tab a, .menu ul.tab li.tab a:visited
{display:block;font-weight:bold;text-align:center;padding-left:
50px;padding-right:50px;text-decoration:none;height:
30px;color:#00;background:#ff;line-height:30px;border:#cdcdcd
solid 1px;}
/* make the dropdown ul invisible */
.menu ul.tab ul.tab {position:absolute; left:-px; height:0;}
/* set the background and foreground color of the main menu items on
hover */
.menu ul.tab li.tab a:hover,.menu.tab ul.tab li.tab:hover a
{color:#477ffd;background:#ff;border-bottom:#ff solid 1px;}
/* make the content ul visible and position it beneath the first list
item */
.menu ul.tab :hover ul.tab {left:5px;height:500px;width:
100%;background:#ff;text-align:left;z-index:100;}
/* make the content ul li the full width with padding and border. Add
an auto scroll bar */
.menu ul.tab :hover ul.tab li.tab {height:500px;width:
100%;overflow:auto;}
---
And the bits from the html that I've uploaded to the correct file:
---
div class=tabborder
div class=menu
ul class=tab
li class=taba href=#hoverReviews/a
ul class=tabli class=tab
div class=extras
(This is the extra content area where there are a few php echo calls,
some images and text with a span class of text.)
/div
div class=listing
br /br /
This is the main content area where there are a few php echo calls,
some images and text with a span class of text.
/div!-- end listing --
/li/ul/li
(repeat the above chunk a few more times for multiple tabs. The chunk
below is what shows as a default when the tabs are not being hovered
over.)
div style='width:100%;height:30px;'/div
div class=listingbox
div class=extras style=text-align:center;br /br /
(Here is default extra content that happens to have no php code.)
/div
div class=listingdefault
(This is the main content area where there are a few php echo calls,
some images and text with a class of text. This displays exactly as
expected.)
/div!-- end default listing --
/div!-- end listing box --
/div!-- end menu --/div!-- end tabborder --
---
Any thoughts? There is a little bit of javascript in the site code
which doesn't look like it has anything to do with menus. I took extra
steps to label all the tags with a tab class to help keep them unique.
Best regards and thanks,
-Delos
__
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] css interference
On 31/05/2009, at 5:13 AM, Delos Woodruff wrote:
In addition to my site being a smidge too wide, I have a more
important issue to worry about. Does php somehow interfere with css
statements? I am trying to create a tab nav like you find at
http://www.cssplay.co.uk/menu/one_page
I have the code working perfectly on a test html page at home. When I
upload it (with the php code that shows the reviews, etc of the
individual listings) to the site, it displays the default div but does
not show the hidden divs when hovering over the tabs. (The site is
checkitlocal.com/index.php and a copy of the css file is at
checkitlocal.com/css.css)
Here's the relevant css code as I've modified it:
---
.tabborder {height:600px;width:800px;}
.listingdefault {background:#ff;height:auto;width:55%;padding:3%;}
.listingbox {border:#cdcdcd solid 1px;margin:1px 0 0 0;height:
I'm afraid I can't see what your question is. I viewed source and
started looking for these classes and they aren't there. Am I missing
something?
PHP will not interfere with anything around CSS. The only time there
will be a problem is if the *output* from the PHP is different from
your static mockups. The only other situation I can think of that
might cause a problem is if you are processing your CSS with PHP and
it doesn't return the correct content type in the header (text/css).
__
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] css interference
Delos Woodruff wrote: In addition to my site being a smidge too wide, I have a more important issue to worry about. Does php somehow interfere with css statements? I am trying to create a tab nav like you find at http://www.cssplay.co.uk/menu/one_page I dunno. Your css snippet appears to be valid. Your markup snippet appears not to be valid. Perhaps you might put the page/site on a public server. And provide a clickable link to it in your post to the list? __ 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/
