17 replies [Last post]
Idling_Shadow
Offline
Regular
Last seen: 15 years 9 weeks ago
Joined: 2007-09-12
Posts: 11
Points: 0

Hey All,

I'm new to these forums and 4 months new to css. Anyways I had a question about a layout for accessibility and if this is good way to approach a

that pops up on a page. Ok I use to put pop-ups at the bottom of the page which makes the markup look like garbage and doesn't really address well executed accessibility for web pages, so I started doing it the way I posted it below my Co-worker said it was a hack because he couldn't understand it and I wanted a second set of eyes and voice to give me some feed back. So here it is.

/* css */

div.chartContainer_holderShell { height: 0; left: 0; overflow: visible; position: absolute; top: 0; width: 100%; z-index: 10; margin: 0; padding: 0; } div.chartContainer_holder { height: 0; overflow: visible; position: relative; top: 87px; margin: 0; padding: 0; } div.chartContainer_holder table.chartContainer_holdertable { margin: 0; border-collapse: collapse; table-layout: auto; width: 773px; padding: 0; }

/* markup */

Triumph (not verified)
Anonymous's picture
Guru

markup is invalid.

markup is invalid.

Idling_Shadow
Offline
Regular
Last seen: 15 years 9 weeks ago
Joined: 2007-09-12
Posts: 11
Points: 0

can you elaborate?

can you elaborate?

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 28 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

validate your markup

validate your markup :?

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Katie
Katie's picture
Offline
Enthusiast
Seattle, WA
Last seen: 7 years 12 weeks ago
Seattle, WA
Timezone: GMT-8
Joined: 2006-08-06
Posts: 357
Points: 2

Idling_Shadow wrote:can you

Idling_Shadow wrote:
can you elaborate?

The code that you've posted doesn't meet the W3C's rules for a valid page. (Check it at http://validator.w3.org/.) A browser can't be expected to properly render an invalid page. We really can't say what's wrong until that is corrected.

Why are you using a table? It looks suspiciously like a layout table...?

What is supposed to appear in the 'content goes here' section? Can you explain how the popup relates to the code you've posted?

Blog: Pew Pew Laser Blog
Online File Storage: DropBox
Daily Deals on Local Activities: Groupon

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Triumph wrote:markup is

Triumph wrote:
markup is invalid.

Doesn't look invalid to me.

Aside from that though: what actually is the question? Feedback on what? You haven't described well enough what you're trying to do.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 28 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Tyssen wrote:Triumph

Tyssen wrote:
Triumph wrote:
markup is invalid.

Doesn't look invalid to me.

Ah, so you see the invisible <html> tag?

Laughing out loud Wink

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Idling_Shadow
Offline
Regular
Last seen: 15 years 9 weeks ago
Joined: 2007-09-12
Posts: 11
Points: 0

Absolutely relative RE:

So I checked my code on W3 and according to XHTML 1.0 Transitional guidelines from W3.org my page and the code I posted is completely valid. So whats so invalid to you guys? (pardon me if I seem a little rude but if I'm learning something I really want to make sure I'm doing things right especially if people are trying to standardize the way people construct websites.)

Here is the code I posted to W3.org

Les aventures pittoresques au marché de Compagnie – Vous pourriez gagner un voyage pour deux à Florence, en Italie





var testDiv = document.getElementById('loadingDiv');

function init(){

Effect.BlindDown('loadingDiv');
window.setTimeout('DropOut()', 4000);

}

function DropOut(){

Effect.DropOut('loadingDiv');

}
















init();






Compagnie Logo






Qu’est-ce qu’une aventure pittoresque au marché signifie pour vous? Est-ce la fraîcheur exquise des aliments? Ou la découverte du produit idéal que vous recherchiez depuis si longtemps? Ou peut-être une destination exotique, qui vous fait découvrir de nouveaux paysages, sons et arômes enchanteurs? Partagez votre expérience dès aujourd’hui et courez la chance de gagner un voyage pour deux à Florence, en Italie, ou une des deux batteries de cuisine à 10 pièces. Lorsque vous aurez rédigé votre récit, parcourez le monde pour vivre d’autres aventures au marché ou envoyez une carte postale à un ami.









































Règles et conditions du concours






and here is the css that I also validated.

/* Global Styles */

* { margin: 0; padding: 0; }
html .clearfix { height: 1%; }
.clearFix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
span.hidden { visibility: hidden; overflow: hidden; }
.validationMessage { color: Maroon; font-weight: bold; }

/* Content Aligning */
body { background: url(../fr/images/master/background.jpg) ; font-size: 100.1%; text-align: center; }
div#container { background: url(../fr/images/nav/mainNavBg.gif) repeat-x center top; }
div#main { margin: 0 auto; width: 1000px; text-align: left; }

/* Headers */
h1 { font-size: 1.5em; }
h2 { font-size: 1em; }
h3 { font-size: 0.88em; }

/* General Formatting */
p { font-family: Verdana; font-size: 0.69em; color: #395407; }
a { font-family: Verdana; color: #ed651b; }

ol { font-family: Verdana; font-size: 0.69em; color: #395407; list-style-position: inside; }

label { color: #536b28; font-family: Verdana; font-size: 0.69em; }
input { color: #414841; font-family: Verdana; font-size: 0.8em; }
textarea { color: #414841; font-family: Verdana; font-size: 0.8em; }
select { color: #414841; font-family: Verdana; font-size: 0.8em; }
span { font-family: Verdana; font-size: 0.69em; color: #395407;}

div.formHR { background: url(../fr/images/master/formHR.gif) repeat-x; width: 658px; height: 1px; margin: 12px 0; }

/* masterpage.master */

div#header { height: 78px; position: relative; z-index: 20; }
div#siteContainer { float: left; position: relative; margin-top: -27px; z-index: 10; }
div#knorrLogo { float: left; display: inline; background: url(../fr/images/master/knorr_logo.gif) no-repeat; width: 80px; height: 78px; margin: 0 0 0 30px; cursor: pointer; }
div#header h1 { float: left; display: inline; background: url(../fr/images/master/inspiration_slogan.gif) no-repeat; width: 240px; height: 33px; margin: 10px 12px 0 13px; }
div#header h1 a { display: block; width: 100%; height: 100%; text-decoration: none; }
div#contentContainer { float: left; display: inline; position: relative; z-index: 1002; background: url(../fr/images/master/contentContainerBg.gif) repeat-y; width: 763px; margin-left: -3px; min-height: 1045px; height:auto !important; height:1045px; padding-bottom: 20px; }

/* main nav */
ul#navigate { list-style-type: none; }
ul#navigate li { float: left; margin: -1px 0 0 0; display: inline; }
ul#navigate li a { display: block; width: 100%; height: 100%; text-decoration: none; }

ul#navigate li.share { background: url(../fr/images/nav/mainNav_li_share.gif) no-repeat; width: 151px; height: 51px; }
ul#navigate li.share_ON { background: url(../fr/images/nav/mainNav_li_share_ON.gif) no-repeat; width: 151px; height: 66px; }

ul#navigate li.explore { background: url(../fr/images/nav/mainNav_li_world.gif) no-repeat; width: 151px; height: 51px; }
ul#navigate li.explore_ON { background: url(../fr/images/nav/mainNav_li_world_ON.gif) no-repeat; width: 151px; height: 66px; }

ul#navigate li.postcard { background: url(../fr/images/nav/mainNav_li_postcard.gif) no-repeat; width: 118px; height: 51px; }
ul#navigate li.postcard_ON { background: url(../fr/images/nav/mainNav_li_postcard_ON.gif) no-repeat; width: 118px; height: 66px; }

ul#navigate li.help { background: url(../fr/images/nav/mainNav_li_info.gif) no-repeat; width: 129px; height: 51px; }
ul#navigate li.help_ON { background: url(../fr/images/nav/mainNav_li_info_ON.gif) no-repeat; width: 129px; height: 66px; }

ul#navigate li.knorr { background: url(../fr/images/nav/mainNav_li_knorr.gif) no-repeat; width: 65px; height: 51px; }

/* sideBar */
div#sideBar { float: left; width: 237px; }

div#exploreCallOut { background: url(../fr/images/sidebar/explore_markets.gif) no-repeat; width: 237px; height: 277px; overflow: hidden; }
div#exploreCallOut a { float: right; height: 35px; margin: 152px 40px 0; text-decoration: none; width: 57px ; }

div#popularStories { float: right; background: url(../fr/images/sidebar/sideBarBg.gif) repeat-y ; width: 206px; height: auto; }
div#popularStories h3 { float:right; background: url(../fr/images/sidebar/popular_stories.gif) no-repeat; width: 149px; height: 73px; margin-right: 5px; overflow: hidden; }

div.popularStory { float: right; margin: 1px 0; width: 206px; height: auto; }
div.popularStory p { font-family: Verdana; font-size: 0.69em; color: #414841; }

div.popularStory div.popularStories_sideBar_text { float: left; width: 115px; margin:12px 2px 0 0; text-align: right; }
div.popularStory div.popularStories_sideBar_text a { color: #414841; text-decoration: none; }

div.popularStory div.polaroid { float: left; background: url(../fr/images/sidebar/polaroid.gif) no-repeat; width: 79px; height: 65px; padding: 4px 0 0 3px; }
div.popularStory div.polaroid img { text-decoration: none; border: 0 solid; }

div.popularStory div.stamp { float: left; background: url(../fr/images/sidebar/stamp.gif) no-repeat; width: 82px; height: 58px; padding: 2px 0 0 5px; }
div.popularStory div.stamp img { text-decoration: none; border: 0 solid; }

div#BG_extension { float: right; width: 1px; height: 135px; }

div#sideBarBottom { float: right; background: url(../fr/images/sidebar/sideBarBottom.png) no-repeat; width: 205px; height: 389px; margin-top: -135px; }
div#sideBarBottom a { display: block; width: 100%; height: 100%; text-decoration: none; }

/* index.aspx */

/* Loading Images... */
div#loadingDiv { height: 131px; left: 0; overflow: visible; position: absolute; top: 125px; width: 100%; z-index: 100; }
div#insideLoadingDiv { top: 0; height: 131px; overflow: visible; position: relative; }
table#loadingTable { background-color: White; width: 400px; height:13px; border-collapse: collapse; margin: auto; table-layout: fixed; }
table#loadingTable div#loadingImg { background: url(../fr/images/loading_fr.gif) no-repeat top center; width: 400px; height: 131px; }

/* Switching the main div background for the index.aspx page */
div#indexContainer div#main { background: url(../fr/images/indexPage/mainContainerBg_top.png) no-repeat center top; width: 1013px; }

div#mainContainer_top div#knorrLogo { position: relative; z-index: 1001; }
div#mainContainer_top h1 { float: left; display: inline; background: url(../fr/images/master/inspiration_slogan.gif) no-repeat; width: 289px; height: 37px; margin: 23px 12px 0 0; }
div#mainContainer_top ul#navigate li { float: right; height: 11px; margin: 33px 20px 0 0; display: inline; }
div#mainContainer_top ul#navigate li a { display: block; width: 100%; height: 100%; text-decoration: none; }
div#mainContainer_top ul#navigate li.knorr { background: url(../fr/images/nav/mainNav_li_knorr_main.gif) no-repeat; width: 61px; }

div#mainContainer_body { background: url(../fr/images/indexPage/mainContainerBg_body.gif) repeat-y center top; float: left; display: inline; width: 1013px; margin: -20px 0 0 0; padding: 0; }
div#mainContainer_body p { font-size: 0.82em; color: #ffffff; width: 540px; padding: 30px 0 0 25px; }

div#inspirationBlurb { background: url(../fr/images/indexPage/mainContainer_body[topLeft].jpg) no-repeat; float: left; display: inline; width: 568px; height: 367px; margin: 0 0 0 6px; }

div#newProducts { background: url(../fr/images/indexPage/mainContainer_body[topRite].jpg) no-repeat; float: left; display: inline; width: 439px; height: 367px; }
div#newProducts a { background: url(../fr/images/indexPage/index_btn_viewProducts.gif) no-repeat; float: right; display: inline; width: 147px; height: 31px; margin: 122px 34px 0; text-decoration: none; }

div#contestEntry { float: left; display: inline; text-align: right; height: 274px; margin: -511px 0 0 13px; width: 521px; }
div#contestEntry a { background: url(../fr/images/indexPage/index_btn_enterNow.gif) no-repeat; float: right; display: inline; width: 76px; height: 31px; margin: 0; text-decoration: none; }

div#popularStorySearch { background: url(../fr/images/indexPage/mainContainer_body_botLow.gif) no-repeat; float: left; display: inline; width: 527px; height: 325px; margin: 0 0 0 7px; }
div#indexPopularStory { margin: 70px 0 0 12px; height: 82px; }
div#indexPopularStory div.stamp { float: left; display: inline; background: url(../fr/images/indexPage/stamp.gif) no-repeat; width: 98px; height: 84px; }
div#indexPopularStory div.stamp img { margin: 12px 0 0 13px; text-decoration: none; border: 0 solid; }

div#moreStories { margin: 0px 0 0 150px; text-align: right; width: 350px; }
div#moreStories select { width: 170px; }
div#moreStories input#btnFeaturedStory { margin: 3px 15px 0 0; }

div#exploreWorld { background: url(../fr/images/indexPage/mainContainer_body_botLowR.gif) no-repeat; float: left; display: inline; height: 268px; margin: 0 0 0 30px; width: 426px; }
div#exploreWorld a { float: left; display: inline; font-size: 0.69em; margin: 243px 0 0 57px; }
div#exploreWorld a#explore { background: url(../fr/images/indexPage/index_btn_explore.gif) no-repeat; float: right; display: inline; width: 66px; height: 31px; text-decoration: none; margin:248px 48px 0 0; }

div#mainConatiner_footer { background: url(../fr/images/indexPage/mainContainerBg_footer.gif) no-repeat center bottom; float: left; display: inline; width: 1013px; height: 16px; margin: -10px 0 0; }

/* shareyouradventure.aspx */

div#ctl00_MasterPageContent_contentShareYourAdventureForm { margin-left: 30px; }

div#shareYourAdventureHeader { background: url(../fr/images/master/mainPageHeader[short].jpg) no-repeat; width: 761px; height: 149px; overflow: hidden; }
div#ctl00_MasterPageContent_contentShareYourAdventureForm table { border: 0 solid red; width: 700px; }
div#contentShareYourAdventure div.formHR { margin-left: 20px; }

/* Your Market Adventure Story & Geocode */
table#marketAdventureStory h3 { background: url(../fr/images/storyForm/h3_fromHeader_adventure.gif) no-repeat; margin: 10px 0 15px 0; overflow: hidden; width: 270px; height: 15px; float: left; display: inline; }
table#marketAdventureStory p { display: inline; float: right; font-size: 0.63em; margin: 10px 15px 15px 0; }

td.adventureStory { width: 100px; vertical-align: top; }

#ctl00_MasterPageContent_txtStoryTitle { width: 580px; }
#ctl00_MasterPageContent_txtStoryDescription { width: 580px; height: 130px; }

td#geoResults { width: 320px; vertical-align: top; }

td#uploadPicture { width: 280px; vertical-align: top; padding: 4px 0; }

#ctl00_MasterPageContent_divChangeImageButton { margin-bottom: 5px; }

td#labelTakePlace { vertical-align: top; padding:0 0 8px; }

#ctl00_MasterPageContent_drpGeotagCountry { width: 220px; }
#ctl00_MasterPageContent_txtGeotagCity { width: 218px; }

#ctl00_MasterPageContent_GeoTagConfirmDiv { }
#ctl00_MasterPageContent_GeoTagConfirmDiv p { }
#ctl00_MasterPageContent_GeoTagConfirmDiv input { }

img#resetLocation { cursor: pointer; }

/* Validation */
h3#captchaVerification { background: url(../fr/images/storyForm/h3_fromHeader_validation.gif) no-repeat; overflow: hidden; margin-bottom: 2px; }
div#ctl00_MasterPageContent_contentShareYourAdventureForm table#validation { width: 555px; margin-left: 90px; }
a#ctl00_MasterPageContent_btnCaptchaRefresh { font-size: 0.69em; }
a#whatIs { font-size: 0.69em; }

/* Enter contest & Information */
h3#enterContestQuestion { background: url(../fr/images/storyForm/h3_fromHeader_enter.gif) no-repeat; float: left; margin: 0 40px 0 0; overflow: hidden; width: 285px; }
h3#yourInformation { background: url(../fr/images/storyForm/h3_fromHeader_information.gif) no-repeat; overflow: hidden; margin: 4px 0 11px 0; }
input#ctl00_MasterPageContent_radEnterContest_0 { margin:0px 3px -1px 0px; }
input#ctl00_MasterPageContent_radEnterContest_1 { margin:0px 3px -2px 20px; }
div#ctl00_MasterPageContent_contentShareYourAdventureForm table#enterContest { width: 660px; margin: 0px 0px 0px 25px; }
div#ctl00_MasterPageContent_contentShareYourAdventureForm table#noneContestEntry { width: 660px; margin: 0px 0px 0px 25px; }
div#ctl00_MasterPageContent_contentShareYourAdventureForm table#ctl00_MasterPageContent_radEnterContest { width: auto; }

div.labelStoryTitle { background: url(../fr/images/storyForm/formLabel_your_story_title.gif) no-repeat 0% 50%; overflow: hidden; }
div.labelStory { background: url(../fr/images/storyForm/formLabel_your_story.gif) no-repeat top left; overflow: hidden; }
div.labelUpload { background: url(../fr/images/storyForm/formLabels[bold]_upload.gif) no-repeat; width: 269px; height: 15px; overflow: hidden; }
div.labelTakePlace { background: url(../fr/images/storyForm/formLabels[bold]_take_place.gif) no-repeat; height: 15px; overflow: hidden; }
div.labelDidYouMean { background: url(../fr/images/storyForm/formLabel_did_you_mean.gif) no-repeat bottom left; overflow: hidden; vertical-align: bottom; }
div.labelCountry { background: url(../fr/images/storyForm/formLabel_country.gif) no-repeat right top; overflow: hidden; margin: 0 0 0 0 }
div.labelCityTown { background: url(../fr/images/storyForm/formLabel_city.gif) no-repeat right top; overflow: hidden; }
div.labelEnterValidation { background: url(../fr/images/storyForm/formLabel_enter_validation.gif) no-repeat; overflow: hidden; }
div.labelFirstName { background: url(../fr/images/storyForm/formLabel_first_name.gif) no-repeat; overflow: hidden; }
div.labelProvince { background: url(../fr/images/storyForm/formLabel_province.gif) no-repeat; overflow: hidden; }
div.labelLastName { background: url(../fr/images/storyForm/formLabel_last_name.gif) no-repeat; overflow: hidden; }
div.labelPostalCode { background: url(../fr/images/storyForm/formLabel_postal_code.gif) no-repeat; overflow: hidden; }
div.labelAddress { background: url(../fr/images/storyForm/formLabel_address.gif) no-repeat; overflow: hidden; }
div.labelPhoneName { background: url(../fr/images/storyForm/formLabel_phone_number.gif) no-repeat; overflow: hidden; width: 169px; }
div.labelCity { background: url(../fr/images/storyForm/formLabel_cityContest.gif) no-repeat; overflow: hidden; }
div.labelEmail { background: url(../fr/images/storyForm/formLabel_email.gif) no-repeat; overflow: hidden; }

/* Terms & Conditions */
table#rulesTerms h3 { background: url(../fr/images/storyForm/h3_fromHeader_rules.gif) no-repeat; overflow: hidden; height: 15px; margin-bottom: 8px; }
table#rulesTerms p { margin: 5px 0; }
table#rulesTerms input { margin-right: 4px; }
#storyClearBtn { margin-right: 4px; cursor: pointer; }

/* What is this popUp */
div#popContainer { height: 0; left: 0; overflow: visible; position: absolute; top: 0; width: 100%; z-index: 1010; }
div#popContainerInside { top: 530px; height: 0; overflow: visible; position: relative; }
table#popUp { border-collapse: collapse; float: right; table-layout: auto; width: 238px; margin-right: 30px; }
div#whatsThis_popUp { background: url(../fr/images/storyForm/what_is_this_popup.png) no-repeat; height: 160px; }
div#whatsThis_popUp a { display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer; }
div#whatsThis_popUp span { display: block; margin: 0 0 0 20px; padding: 40px 0 0; width: 195px; }

/* thank you message */
div.tellUsThankYou { width: 735px; margin: 20px 0px 0px 23px; }
div.tellUsThankYou h3 { background: url(../fr/images/storyForm/h3_thankyou.gif) no-repeat; overflow: hidden; height: 14px; margin-bottom: 8px; }
div.tellUsThankYou a { font-size: 0.69em; }

/* story.aspx */

div#shareYourAdventureHeader_Story { background: url(../fr/images/master/Header[short]Story.jpg) no-repeat; width: 761px; height: 149px; overflow: hidden; }

div#contentStory { margin-left: 23px; }

div#ctl00_MasterPageContent_userStory { width: 735px; margin: 20px 0 0; }
div#story { float: left; width: 450px; }
div#ctl00_MasterPageContent_storyText { width: 420px; height: auto; margin: 10px 0 20px; overflow: hidden; }
div#ctl00_MasterPageContent_storyPhoto { background: url(../fr/images/storyRate/storyImageBg.jpg) repeat; height: 242px; overflow: hidden; padding: 6px 0 0 8px; width: 274px; }
div#ratePicture { float: left; width: 285px; }
div#rating { float: right; padding: 0 12px 15px 0; }
img#ctl00_MasterPageContent_storyRating { float: right; padding: 0 0 12px 0; }
div#textRating { clear: right; float: right; text-align: right; width: 270px; }
div#textRating span { font-size: 1em; }
div#ctl00_MasterPageContent_storyPhoto { float: right; }
div#headline_text { color: #395407; font-family: Verdana; }

/* sIFR */
/* These are standard sIFR styles... do not modify */

/* sIFR uses javascript to replace headers with flash movies of the same size which will automatically

import the text and style the text with a nonstandard font */

.sIFR-flash { visibility: visible !important; margin: 0; }

.sIFR-replaced { visibility: visible !important; }

span.sIFR-alternate { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden; }

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */

.sIFR-flash + div[adblocktab=true] { display: none !important; }

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash h2.storyTitleHeader { visibility: hidden; font-size: 2.0em; }

/* Tab Toggles */
ul#activeTabingStory { border: 0 red solid; clear: left; float: left; }
ul#activeTabingStory li { float: left; height: 33px; display: inline; }
ul#activeTabingStory li a { width: 100%; height: 30px; display: block; text-decoration: none; }
ul#activeTabingStory li.sendToFriend_ON { background: url(../fr/images/storyRate/tabs_darkGreen_send_On.gif) no-repeat; width: 230px; margin-right: 2px; }
ul#activeTabingStory li.sendToFriend_OFF { background: url(../fr/images/storyRate/tabs_lightGreen_send_Off.gif) no-repeat; width: 230px; margin-right: 2px; }
ul#activeTabingStory li.rateThisStory_ON { background: url(../fr/images/storyRate/tabs_darkGreen_rate_On.gif) no-repeat; width: 230px; }
ul#activeTabingStory li.rateThisStory_OFF { background: url(../fr/images/storyRate/tabs_lightGreen_rate_Off.gif) no-repeat; width: 230px; }

div#ctl00_MasterPageContent_contentSendForm { margin: 20px 0 0 25px; }
div.txtYourName { background: url(../fr/images/storyRate/formLabel_your_name.gif) no-repeat; overflow: hidden; }
div.txtYourEmail { background: url(../fr/images/storyRate/formLabel_your_email.gif) no-repeat; overflow: hidden; }
div.txtYourMessage { background: url(../fr/images/storyRate/formLabel_your_message.gif) no-repeat; height: 13px; overflow: hidden; }
div.txtTheirName { background: url(../fr/images/storyRate/formLabel_your_friends_name.gif) no-repeat; overflow: hidden; height: 12px; }
div.txtTheirEmail { background: url(../fr/images/storyRate/formLabel_your_friend_email.gif) no-repeat; overflow: hidden; width: 203px; height: 12px; }

div#ctl00_MasterPageContent_contentSendForm h3#captchaVerification { background: url(../fr/images/storyRate/formLabels[bold]_validation.gif) no-repeat; overflow: hidden; margin: 15px 0 15px 0; }
#ctl00_MasterPageContent_StoryCaptchaRefresh { font-size: 0.69em; }
img#ctl00_MasterPageContent_imgCaptcha { margin-right: 20px; }

/* What is this popUp */
div#ctl00_MasterPageContent_contentSendForm div#popContainer { height: 180px; left: 0; overflow: visible; position: relative; top: 0; width: 100%; z-index: 1010; margin: -180px 0 0 0; }
div#ctl00_MasterPageContent_contentSendForm div#popContainerInside { top: 0; height: 0; overflow: visible; position: relative; }
div#ctl00_MasterPageContent_contentSendForm table#popUp {border-collapse:collapse;float:right;margin:0px 40px 0pt 0pt;table-layout:auto;width:238px;}
div#ctl00_MasterPageContent_contentSendForm div#whatsThis_popUp { background: url(../fr/images/storyForm/what_is_this_popup.png) no-repeat; height: 160px; width: 237px; }
div#ctl00_MasterPageContent_contentSendForm div#whatsThis_popUp a { display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer; }
div#ctl00_MasterPageContent_contentSendForm div#whatsThis_popUp span { display: block; margin: 0 0 0 20px; padding: 41px 0 0; width: 195px; }

div#ctl00_MasterPageContent_contentRateForm { margin: 20px 0 0 32px; width: 655px; height: 150px }
table.tblBasketRater { margin-top: 15px; }
div.txtYourRating { background: url(../fr/images/storyRate/formLabels[bold]_your_rate.gif) no-repeat; height: 15px; overflow: hidden; }
.basket-rating,.basket-rating a:hover,.basket-rating a:active,.basket-rating a:focus,.basket-rating .current-rating{ background: url(../fr/images/storyRate/baskets.gif) left -1000px repeat-x; }
.basket-rating{ position: relative; width: 125px; height: 25px; overflow: hidden; list-style: none; margin: 0 5px 0 0; background-position: left top; }
.basket-rating li{ display: inline; }
.basket-rating a,
.basket-rating .current-rating{ position: absolute; top: 0; left: 0; text-indent: -1000em; height: 25px; line-height: 25px; outline: none; overflow: hidden; border: none; }
.basket-rating a:hover,.basket-rating a:active,.basket-rating a:focus{ background-position: left bottom; }
.basket-rating a.one-basket{ width: 20%; z-index: 6; }
.basket-rating a.two-baskets{ width: 40%; z-index: 5; }
.basket-rating a.three-baskets{ width: 60%; z-index: 4; }
.basket-rating a.four-baskets{ width: 80%; z-index: 3; }
.basket-rating a.five-baskets{ width: 100%; z-index: 2; }
.basket-rating .current-rating{ z-index: 1; background-position: left center; }

div#ctl00_MasterPageContent_contentSend { clear: both; border: 1px solid #395407; background-color: #e7efd9; width: 715px; height: auto; }
div#ctl00_MasterPageContent_contentSendThankYou { clear: both; border: 1px solid #395407; background-color: #e7efd9; width: 715px; height: auto; }
div#ctl00_MasterPageContent_contentSendThankYou div.sendThankYou { background: url(../fr/images/storyRate/formLabels[bold]_thankSend.gif) no-repeat; height: 15px; margin: 20px 0 0 25px; overflow: hidden; }
div#ctl00_MasterPageContent_contentSendThankYou div#sendThankYouContent { width: 650px; margin: 10px 0 0 25px; }
div#ctl00_MasterPageContent_contentSendThankYou div#sendThankYouContent a { font-size: 0.69em; }
div#ctl00_MasterPageContent_contentRate { clear: both; border: 1px solid #395407; background-color: #e7efd9; width: 715px; height: auto; }
div#ctl00_MasterPageContent_contentRateThankYou { clear: both; border: 1px solid #395407; background-color: #e7efd9; width: 715px; height: auto; }
div#ctl00_MasterPageContent_contentRateThankYou div.rateThankYou { background: url(../fr/images/storyRate/formLabels[bold]_thankRate.gif) no-repeat; height: 15px; margin: 20px 0 0 25px; overflow: hidden; }
div#ctl00_MasterPageContent_contentRateThankYou div#rateThankYouContent { width: 650px; margin: 10px 0 0 25px; }
div#ctl00_MasterPageContent_contentRateThankYou div#rateThankYouContent a { font-size: 0.69em; }

/* sendapostcard.aspx */

div#shareYourAdventureHeader_Postcard { background: url(../fr/images/master/Header[short]Postcard.jpg) no-repeat; width: 761px; height: 149px; overflow: hidden; }

div#step1Step2 { margin-left: 23px; }

div#step1Step2 h3#selectPostcard { background: url(../fr/images/postCard/h3_postHeader_postcard.gif) no-repeat; overflow: hidden; margin: 25px 0 15px; width: 214px; height: 13px; }
table#step1 { margin-left: 20px; }
table#step1 div#centerDivAlign { margin: 0 25px; }
div#step1Step2 h3#fillFormBelow { background: url(../fr/images/postCard/h3_postHeader_fill_in.gif) no-repeat; overflow: hidden; margin:20px 0 0 0; }
div#step1Step2 h3#captchaVerification { background: url(../fr/images/storyRate/formLabels[bold]_validation.gif) no-repeat; overflow: hidden; margin:20px 0 10px; }

div#step3Preview { margin-left: 61px; }
div#step4Back { margin-left: 61px; }
h3.previewPostCard { background: url(../fr/images/postCard/h3_postHeader_preview.gif) no-repeat; overflow: hidden; height: 15px; margin: 25px 0 15px; }
#ctl00_MasterPageContent_Panel2 a { text-decoration: none; font-size: 0.69em; }
span.divide { color: #adadad; }

a#PreviewFront_ON { background: url(../fr/images/postCard/postCardLabel_front[orange].gif) no-repeat; overflow: hidden; padding-right: 8px; }
a#PreviewFront_OFF { background: url(../fr/images/postCard/postCardLabel_front[green].gif) no-repeat; overflow: hidden; padding-right: 8px; }
a#PreviewBack_ON { background: url(../fr/images/postCard/postCardLabel_back[orange].gif) no-repeat; overflow: hidden; padding-right: 10px; }
a#PreviewBack_OFF { background: url(../fr/images/postCard/postCardLabel_back[green].gif) no-repeat; overflow: hidden; padding-right: 10px; }

div#stepsContainer2 { margin-left: 23px; }
div#stepsContainer3 { margin-left: 23px; }
div#stepsContainer4 { margin-left: 23px; }

div#stepsContainer4 h3#thankYou { background: url(../fr/images/postCard/h3_postHeader_thankYou.gif) no-repeat; overflow: hidden; width: 450px; height: 16px; margin: 25px 0; }
div#stepsContainer4 a { font-size: 0.69em; }

table#prevCardBack { width: 600px; vertical-align: middle; }
table#prevCardBack td.message { background: url(../fr/images/postCard/postCard_backLeft.jpg) no-repeat; overflow: hidden; width: 295px; height: 410px; vertical-align: middle; }
table#prevCardBack td.message div.messageTextDivFormat { width: 260px; height: 270px; margin: 35px 0 0 20px; overflow: auto; vertical-align: middle; }
table#prevCardBack td.address { background: url(../fr/images/postCard/postCard_backRight.jpg) no-repeat; overflow: hidden; width: 305px; height: 410px; }
table#prevCardBack td.address h4#postCardBack_to { background: url(../fr/images/postCard/h4_postHeader_to.gif) no-repeat; width: 220px; height: 27px; margin: 0 0 5px 20px; padding: 5px 0 0 24px ; overflow: hidden; }
table#prevCardBack td.address h4#postCardBack_to span { font-weight: lighter; }
table#prevCardBack td.address h4#postCardBack_from { background: url(../fr/images/postCard/h4_postHeader_from.gif) no-repeat; width: 220px; height: 27px; margin: 0 0 0 20px; padding: 5px 0 0 14px ; overflow: hidden; }
table#prevCardBack td.address h4#postCardBack_from span { font-weight: lighter; }

#ctl00_MasterPageContent_PostCaptchaRefresh { font-size: 0.69em; }

img.postHover {border: 2px solid #395407;}
img.postHoverOver {border: 2px solid #fac14c;}

/* contestinfo.aspx */

div#shareYourAdventureHeader_Contest { background: url(../fr/images/master/Header[short]Contest.jpg) no-repeat; width: 761px; height: 225px; overflow: hidden; }

div#contentContestInfo { margin-left: 23px; }
div#contentContestInfo p { margin: 10px 0 10px; line-height: 1.5em; }
div#contentContestInfo ol { list-style-type: lower-alpha; margin: 5px 0px 5px 10px; }
div#contentContestInfo ol li { line-height: 1.5em; }
h3#youCouldWin { background: url(../fr/images/contestInfo/h4_infoHeader_couldWin.gif) no-repeat; overflow: hidden; height: 33px; margin: 25px 0 15px; }
div#prizeContainer { width: 665px; }
h3#contestRules { background: url(../fr/images/contestInfo/h4_infoHeader_contestRules.gif) no-repeat; overflow: hidden; height: 15px; margin: 25px 0 15px; }
div#rulesContainer { border: 1px solid #9aa87e; width: 690px; height: 560px; overflow: auto; padding: 10px; }

/* newproducts.aspx */

div#shareYourAdventureHeader_Products { background: url(../fr/images/master/Header[short]Products.jpg) no-repeat; width: 761px; height: 149px; overflow: hidden; }

div#newProducts_subHeader { background: url(../fr/images/products/products_subHeader.jpg) no-repeat; overflow: hidden; width: 760px; height: 273px; margin-left: 1px; }

div#productContainer { margin: -15px 0 0 48px; position: relative; z-index: 1000; }
div#productContainer div.formHR { margin: 0 10px 0 0; }
div.productImg { width: 170px; height: 145px; cursor: pointer; }

/* FE products */
div#newProductFE { float: left; display: inline; width: 425px; }
div#newProductFE p { margin: 5px 0; }
div#newProductFE a { font-size: 0.69em; }
div#newProductFE h3 { background: url(../fr/images/products/h3_FE.gif) no-repeat; overflow: hidden; height: 33px; margin: 10px 0 5px 0; }
div#shrimpPenne { float: left; display: inline; text-align: center; width: 170px; margin: 0 45px 20px 0; }
div#shrimpPenne div.productImg { background: url(../fr/images/products/FE_shrimp.jpg) no-repeat; overflow: hidden; }
div#rosemaryChicken { float: left; display: inline; text-align: center; width: 170px; margin: 0 0 20px 0; }
div#rosemaryChicken div.productImg { background: url(../fr/images/products/FE_rosemary.jpg) no-repeat; overflow: hidden; }
div#garlicShrimp { float: left; clear: left; display: inline; text-align: center; width: 170px; margin: 0 45px 0 0; }
div#garlicShrimp div.productImg { background: url(../fr/images/products/FE_garlic.jpg) no-repeat; overflow: hidden; }
div#chickenRigatoni { float: left; display: inline; text-align: center; width: 170px; }
div#chickenRigatoni div.productImg { background: url(../fr/images/products/FE_chicken.jpg) no-repeat; overflow: hidden; }

/* RTS products */
div#newProductRTS { float: left; display: inline; width: 170px; margin: 0 0 20px 0; }
div#newProductRTS a { font-size: 0.69em; }
div#newProductRTS h3 { background: url(../fr/images/products/h3_RTS.gif) no-repeat; overflow: hidden; width: 220px; height: 33px; margin: 10px 0 5px 0; }
div#heartyItalian { text-align: center; width: 170px; }
div#heartyItalian div.productImg { background: url(../fr/images/products/RTS_hearty.jpg) no-repeat; overflow: hidden; }

/* ShareYourAdventure callout */
div#shareYourAdventure_callOut { float: left; display: inline; background: url(../fr/images/products/adventure_callOut.gif) no-repeat; overflow: hidden; width: 188px; height: 190px; margin-top: 5px; }
div#shareYourAdventure_callOut a { display: block; width: 100%; height: 100%; text-decoration: none; }

/* search pages */

/* listSearch */
.normalRow { background-color: #f1f9e2; height: 74px; }
.alternateRow { background-color: White; height: 74px; }

div#searchContainer_List { margin: 0 0 0 23px; }
div#searchContainer_List h3#amazingMarkets { background: url(../fr/images/search/h3_search_the_world.gif) no-repeat; overflow: hidden; height: 14px; margin: 10px 0; }
div#searchContainer_List table { float: left; display: inline; }
div#searchContainer_List div#labelLocation { background: url(../fr/images/search/labels[bold]_location.gif) no-repeat; overflow: hidden; height: 16px; margin: 5px 0; }
div#searchContainer_List div#labelPopularity { background: url(../fr/images/search/labels[bold]_popularity.gif) no-repeat; overflow: hidden; height: 16px; margin: 5px 0; }
div#searchContainer_List div#labelRating { background: url(../fr/images/search/labels[bold]_rating.gif) no-repeat; overflow: hidden; height: 16px; margin: 5px 0; }
div#searchContainer_List select { width: 205px; margin: 0 25px 0 0; }
div#searchContainer_List div#toggleSearch_container { float: left; display: inline; margin: 10px 0 2px; }
div#searchContainer_List div#showMap { float: left; }
div#searchContainer_List div#showList { float: left; margin: 0 25px 0 50px; }
div#searchContainer_List div#clear_find { display: inline; margin: 0 40px 0 465px; }
div#searchContainer_List div#clear_find #ctl00_MasterPageContent_clear { margin: 0 10px 0 0; }
div#searchContainer_List div.formHR { clear: both; margin-left: 3px; width: 713px; }
div#searchContainer_List h3#searchResults { background: url(../fr/images/search/h3_search_results.gif) no-repeat; overflow: hidden; height: 14px; margin: 5px 0 10px 0; }
div#searchContainer_List div#searchCriteria { width: 955px; margin: 0 0 10px 0; }
div#searchContainer_List div#searchCriteria p { float: left; display: inline; }
div#searchContainer_List div#searchCriteria p span { font-size: 0.80em; }
div#searchContainer_List div#searchCriteria div#displayResultsOf { float: left; display: inline; margin: 0 0 0 30px; }
div#searchContainer_List div#searchCriteria div#displayResultsOf p { color: #6a6a6a; }
div#searchContainer_List div#searchCriteria div#listView { float: right; display: inline; background: url(../fr/images/search/listView.gif) no-repeat center right; height: 15px; padding: 0 10px 0 0; }
div#searchResultsContainer table { border-collapse: collapse; width: 715px; }
div.listSearch_imageContainer { float: left; display: inline; }
div.listSearchBg { background: url(../fr/images/search/image_bg[stamp].gif) no-repeat; width: 76px; height: 61px; overflow: hidden; margin: 0 0 0 5px; padding: 4px 0 0 4px; }
div.listSearchBg a { text-decoration: none; }
div.listSearchBg a img { border: none; width: 72px; height: 52px; }
div.listSearch_info { width: 380px; overflow: hidden; margin: 0 0 0 25px }

div#searchContainer_List div#searchCriteria { width: 715px; margin: 0 0 10px 0; }
div#searchContainer_List div#searchCriteria p { float: left; display: inline; }
div#searchContainer_List div#searchCriteria div#displayResultsOf { float: left; display: inline; margin: 0 0 0 30px; }
div#searchContainer_List div#searchCriteria div#displayResultsOf p { color: #6a6a6a; }
div#searchContainer_List div#searchCriteria div#listView { float: right; display: inline; background: url(../fr/images/search/listView.gif) no-repeat center right; height: 15px; padding: 0 10px 0 0; }
div#searchContainer_List div#searchCriteria div#listView a { text-decoration: none; color:#395407; }

/* mapSearch */
div#shareYourAdventureHeader_Story_long { background: url(../fr/images/master/Header[long]Story.jpg) no-repeat; width: 998px; height: 148px; overflow: hidden; }
div#searchContainer_Map { margin: 0 0 0 20px; }
div#searchContainer_Map h3#amazingMarkets { background: url(../fr/images/search/h3_search_the_world.gif) no-repeat; overflow: hidden; height: 16px; margin: 10px 0; }
div#searchContainer_Map table { float: left; display: inline; }
div#searchContainer_Map div#labelLocation { background: url(../fr/images/search/labels[bold]_location.gif) no-repeat; overflow: hidden; height: 16px; margin: 5px 0; }
div#searchContainer_Map div#labelPopularity { background: url(../fr/images/search/labels[bold]_popularity.gif) no-repeat; overflow: hidden; height: 16px; margin: 5px 0; }
div#searchContainer_Map div#labelRating { background: url(../fr/images/search/labels[bold]_rating.gif) no-repeat; overflow: hidden; height: 16px; margin: 5px 0; }
div#searchContainer_Map select { width: 195px; margin: 0 25px 0 0; }
div#searchContainer_Map div#clear_find input { margin: 10px 10px 0px 0px; }
div#searchContainer_Map div#toggleSearch_container { float: left; display: inline; margin: 0 0 15px 0 }
div#searchContainer_Map div.formHR { clear: both; background: url(../fr/images/master/formHR.gif) repeat-x; width: 962px; margin: 5px 0; }
div#searchContainer_Map h3#searchResults { background: url(../fr/images/search/h3_search_results.gif) no-repeat; overflow: hidden; height: 16px; margin: 5px 0 10px 0; }
div#searchContainer_Map div#searchCriteria { width: 955px; margin: 0 0 10px 0; }
div#searchContainer_Map div#searchCriteria p { float: left; display: inline; }
div#searchContainer_Map div#searchCriteria p span { font-size: 0.80em; }
div#searchContainer_Map div#searchCriteria div#displayResultsOf { float: left; display: inline; margin: 0 0 0 30px; }
div#searchContainer_Map div#searchCriteria div#displayResultsOf p { color: #6a6a6a; }
div#searchContainer_Map div#searchCriteria div#listView { float: right; display: inline; background: url(../fr/images/search/listView.gif) no-repeat center right; height: 15px; padding: 0 10px 0 0; }
div#searchContainer_Map div#searchCriteria div#listView a { text-decoration: none; color:#395407; }
div#map { border: 1px solid Blue; margin: 15px 0 0 20px; }
p#numberOfPages { display: inline; }
p#numberOfPages a { color: #395407; }
div#searchResultsContainer { margin: 15px 0 0 0; }

/* masterPage styles for the Map */
div#mapContentContainer { float: left; display: inline; position: relative; z-index: 1002; background: url(../fr/images/master/mapContentContainerBg.gif) repeat-y; width: 1000px; margin-left: -3px; min-height: 1045px; height: auto !important; height: 1045px; padding-bottom: 20px; }



/* popUp */
div.storyPopUp { width: 215px; height: 234px; }
div.popUp_top { overflow: hidden; width: 215px; height: 47px; }
div.popUp_topInfo { float: left; display: inline; width:175px; margin: 10px 0 0 12px; }
div#locationName { width: 175px; }
div#locationName p { font-family: Verdana !important; color: #395407 !important; font-size: 0.69em !important; font-weight: bolder !important; }
p#cityProvince { width: 175px; }
div.closePopUp { float: left; display: inline; width: 17px; margin: 7px 0 0 0; }
div.closePopUp a { float: left; display: inline; /*background: url(../fr/images/popUp/close_btn.gif) no-repeat;*/ overflow: hidden; width: 17px; height: 17px; text-decoration: none; }
div.popUp_body { overflow: hidden; width: 215px; height: 186px; }
div.popUp_storyTitle { width: 190px; height: 11px; margin: 4px 0px; overflow: hidden; padding: 4px 10px; text-align: center; }
div.body_controls { height: 91px; }
div.popUp_backward { display: inline; float: left; padding: 32px 0 0 15px; width: 23px; }
div.popUp_backward a { background: url(../fr/images/popUp/back_btn.gif) no-repeat; display: block; height: 17px; width: 13px; }
div.popUp_Img { float: left; display: inline; }
div.border { border: 1px solid #56863c; height: 89px; width: 131px; }
div.border img { border: none; height: 89px; width: 131px; overflow: hidden; }
div.popUp_forward { display: inline; float: left; padding: 32px 0 0 10px; width: 23px; }
div.popUp_forward a { background: url(../fr/images/popUp/forward_btn.gif) no-repeat; display: block; height: 17px; width: 13px; }
div.popUp_footer { clear: left; text-align: center; }
div.popUp_footer p { margin: 4px 0; }
div.popUp_footer a { font-size: 0.69em; }


/* viewpostcard.aspx */

div#viewPostCard { margin: 0 0 0 23px; }
div#headerViewPostcard h3 { background: url(../fr/images/postCard/h3_voir_votre_carte_postale.gif) no-repeat; height: 13px; margin:25px 0 20px 0; border: 0px solid red; }
div#headerViewPostcard p { margin: 0 0 25px 2px; }
div#contentViewPostcard { margin: 0 0 0 61px; }
div#viewPostcardBack { margin: -410px 0 0 0; }
div#btnViewFront a { text-decoration: none; }
div#btnViewBack a { text-decoration: none; }
div#postCard_Btn_Container { height: 11px; width: auto; text-align: center; }
div#postCard_Btn_Container a#PreviewFront_ON { padding: 0; }
div#postCard_Btn_Container a#PreviewFront_OFF { padding: 0; }
div#postCard_Btn_Container a#PreviewBack_ON { padding: 0; }
div#postCard_Btn_Container a#PreviewBack_OFF { padding: 0; }
div#inspirationHook { width: 660px; margin: 25px 0 0 0; }
div#inspirationHook a { font-size: 0.69em; }

/* Terms of Consent */
div#termsOfConsent { background: url(../fr/images/master/Header[short]terms.jpg) no-repeat; width: 761px; height: 225px; overflow: hidden; }
div#termsOfConsentContent { margin-left: 23px; }
div#termsOfConsentContent p { width: 700px; margin: 10px 0 10px; line-height: 1.5em; }
div#termsOfConsentContent ol { width: 700px; list-style-type:decimal; margin: 5px 0px 5px 10px; }
div#termsOfConsentContent ol li { line-height: 1.5em; margin-top: 10px; margin-bottom: 10px; }
h3#termsOfConsent { border: 0px solid red; background: url(../fr/images/contestInfo/h3_termsOfConsent.gif) no-repeat; height: 13px; margin:25px 0 20px 0; }

My question was just "is the popup method that I have been using valid in terms of web accessibility as well I just wanted to make sure that it was proper and not so sort of hack to have popups on a page?".

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 39 weeks 6 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

The code that you sent to

The code that you sent to the validator is nothing like the code you first posted. So you can see why Deuce said it won't validate.

Verschwindende wrote:
  • CSS doesn't make pies

Idling_Shadow
Offline
Regular
Last seen: 15 years 9 weeks ago
Joined: 2007-09-12
Posts: 11
Points: 0

<!DOCTYPE html PUBLIC

Popup Markup and CSS

div#chartContainer_holderShell { height: 0; left: 0; overflow: visible; position: absolute; top: 0; width: 100%; z-index: 10; margin: 0; padding: 0; }
div#chartContainer_holder { height: 0; overflow: visible; position: relative; top: 87px; margin: 0; padding: 0; }
div#chartContainer_holder table.chartContainer_holdertable { margin: 0; border-collapse: collapse; table-layout: auto; width: 773px; padding: 0; }
div#loremContent { background-color: Green; border: 1px red solid; }

function showPopUp() {

var chartContainer_holderShell = document.getElementById('chartContainer_holderShell');

chartContainer_holderShell.style.display = "block";
}
function hidePopUp() {

var chartContainer_holderShell = document.getElementById('chartContainer_holderShell');

chartContainer_holderShell.style.display = "none";
}

Switch On

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent sagittis commodo orci. Integer eu massa. Sed posuere, justo et cursus placerat, justo lectus ornare nisi, sed condimentum urna nisl id purus.Switch Off Nullam a nulla. Integer id dui. Fusce sagittis tincidunt ligula. Vivamus molestie. Cras mattis ligula ut erat. Morbi aliquet dignissim dui. Vivamus rutrum nisi non elit. Praesent viverra, dui a venenatis condimentum, est ligula rutrum ante, eu placerat nibh nulla non turpis. Phasellus tortor.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Tyssen wrote:Aside from that

Tyssen wrote:
Aside from that though: what actually is the question? Feedback on what? You haven't described well enough what you're trying to do.

:rolleyes:

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 28 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Idling_Shadow wrote:So I

Idling_Shadow wrote:
So I checked my code on W3 and according to XHTML 1.0 Transitional guidelines from W3.org my page and the code I posted is completely valid. So whats so invalid to you guys? (pardon me if I seem a little rude <snip>)

Well you do sound rude considering you are questioning what we said, making it seem like we were wrong, when you go and post two completely different sets of code and ask why one validates and one doesn't.

Did you validate the first hunk of crap you called code? Was it valid? The answer is probably no for the first one, and defiantly no for the second one.

Don't come here trying to make us look stupid. For the most part, we know what we're talking about.

Besides that whole rant. What's the point of using transitional on a new site? What are you transitioning from? Build the site using valid, semantic coding, and switch to a strict doctype.

check out www.htmldog.com it has some excellent tutorials for people just getting started with html and css.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Idling_Shadow
Offline
Regular
Last seen: 15 years 9 weeks ago
Joined: 2007-09-12
Posts: 11
Points: 0

Well first off I didn't try

Well first off I didn't try to make you guys and gals look stupid nor did I think it, I thought you would just address my first question about accessibility but instead you just commented on the simply snippet on markup I posted as crap and invalid, I thought you guys would get the idea but instead you just were very unprofessional about helping a new person with a question. And Deuce aside from not wrapping a

tag around one tag it validates fine in Strict and or Transitional XHTML. The idea of this site being any bit professional is laughable.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Whether the markup is valid

Whether the markup is valid or not may not make a difference in a given case, but having the markup valid[1] indicates a careful, meticulous and clueful poster. On this forum, valid markup has become an entry level requirement simply because:
1) It's not rocket science to mark up stuff validly;
2) A significant number of rendering errors are fixed by fixing the html; and
3) Someone who's not willing to get the basics right is probably going to be a royal PITA, arguing every point instead of taking the (even bad) advice as an opportunity for improvement.

Now, the specs are very clear:

<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body -->

Why would you argue against fixing so small a thing?

Give it some thought, then do what you think is right.

cheers,

gary

[1] There can be invalid markup as long as the author has compelling reason, and communicates that reason to the forum. Short of that, we must assume that it's a screw-up.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Idling_Shadow
Offline
Regular
Last seen: 15 years 9 weeks ago
Joined: 2007-09-12
Posts: 11
Points: 0

I completely agree with

I completely agree with kk5st's three points, and if someone were to post at the beginning after my original post "please post exact markup" and not just "validate" I don't believe this "argue" would have happened. It's just when I ask people to elaborate thats when you guys went off on all this validation posts.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Idling_Shadow wrote:if

Idling_Shadow wrote:
if someone were to post at the beginning after my original post "please post exact markup" and not just "validate" I don't believe this "argue" would have happened.

Perhaps not, but I don't know about anyone else, I'm still no closer to understanding what the actual problem is cos you haven't described it adequately.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 39 weeks 6 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

The "argument" was between

The "argument" was between Deuce and Tyssen, if anything.

The stickies at the top of the forums ask you to post all your code.

You wouldn't take a Mini to a mechanics, and ask them why your Jaguar doesn't start, would you?

Verschwindende wrote:
  • CSS doesn't make pies

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 28 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

I wasn't arguing... just

I wasn't arguing... just being a smart ass :rolleyes:

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph