dsonesuk

button.button:hover + div.message {visibility:visible;}button.button2:hover + div.message2 {visibility:visible;} Actually this should not work with '+' as it targets the very next div element, it does not care if it has class or id ref, you would have to use '~' instead.

Not! necccesssssarillllly .iso{background:url(http://static.mikroviologos.eu/image/hktheme/sprites2.png) 0 10px no-repeat; height: 30px; line-height:30px; padding-left: 30px;float: left;} <p class="iso">text text</p>

Humans, yes! do forget! but continuously, No! they should be able to retain some memory and knowledge and not keep repeating the same mistakes, again and again, and again. I mean 18 Months and you STILL can't get through the basics of html and php.

probably better to use visibility rather than display. .button {padding:0px;width:82px;height:40px;vertical-align:top;}.message {position:relative;margin:10px 0px 0px -5px;background:white;width:100px;/*display:none;*/visibility:hidden;border-style:solid;border-width:4px;}.button2 {padding:0px;width:82px;height:40px;vertical-align:top;}.message2 {position:relative;margin:10px 0px 0px -5px;background:white;width:100px;/*display:none;*/visibility:hidden;border-style:solid;border-width:4px;}.button_cont {float:left; text-align:center;}button.button:hover + div.message {visibility:visible;}button.button2:hover + div.message2 {visibility:visible;} <div class="button_cont"><button class="button" id="a1" >Company Info</button><div class="message" id="a2">This company.</div></div><div class="button_cont"><button class="button2" id="b1" >Item Info</button><div class="message2" id="b2">This item.</div></div>

No! everyone HERE seems to be your personal validator, Oh! my form does not work, well it can't possibly be anything done wrong by myself, so it would be pointless in validating my page at http://validator.w3.org/, guess i'll just have post yet again! dah, problems, problems, problems.

http://w3schools.com/cssref/css_selectors.asp + targets next sibling element~ target all next sibling specific elements

Use my method, works in all browsers, and get same result. button.button:hover + div.message {display:block;} <?php echo '<button class="button" >Company Info';$item = "This item."; echo '</button>'; echo '<div class="message">' . $item . '</div>'; ?>

unclosed <form> element, i know this is a waste of time, any chance of validating page before posting, hey what do you say...its what its there for, to point out these errors.

Well you can force IE9 to use IE7 compatibility mode, because unbelievably IE9/IE8 compat No! but IE7 compat Yes! OR button.button:hover + div.message {display:block;} <?php echo '<button class="button" >Company Info';$item = "This item."; echo '</button>'; echo '<div class="message">' . $item . '</div>'; ?>

IE 9, has IE7 & 8, compatibility whatnot, i also have, IE8 with IE7 compatibility in XP mode for windows 7, I tried IETester but it seems buggy to me.

When i click css (top row) firebug, select 'stylesheet.css', click source edit I still see <?php include_once("/connect.php") ?>#wrap {width: 950px;min-height:800px;margin: 0 auto;border:2px solid black;} the site with this, position itself left! remove '<?php include_once("/connect.php") ?>' using source editor, click html (top row), click any element other than #wrap, the return to #wrap, the styling, stylesheet can now be seen, and the site is now centered.

function Large(obj) { var imgbox=document.getElementById("imgbox"); imgbox.style.visibility='visible'; var info=document.getElementById("info"); if(obj.title) { info.innerHTML= obj.title; } else { info.innerHTML= obj.src; } info.style.visibility='visible'; var img = document.createElement("img"); img.src=obj.src; img.style.width='700px'; img.style.height='auto'; if(img.addEventListener) { img.addEventListener('click',Out,false); } else { img.attachEvent('onclick',Out); } imgbox.innerHTML='<div style="float:right;z-index:99;"><img id="close" alt = "image" src = "../images/close2.png" onmouseover = "this.src = Image_over.src;" onmouseout = "this.src = Image_out.src;" onClick="Out()" /></div>'; imgbox.appendChild(img); imgbox.style.left=(getElementLeft(obj)) +'px'; imgbox.style.top=(getElementTop(obj)) + 'px'; } Oh yea! I'm presuming the thumbnails had <img src='image.gif' title='My image' onclick='Large(this)'/>

remove last comma

Remove <?php include_once("/connect.php") ?> from stylesheet, this will only be read in a file with php, in css file it will cause errors, and probably why the first styling for #wrap, is not being picked up.

<!--[if IE 7]><![endif]--> Is especially made for IE browsers, why! well it very important in making the design look the same as other better browsers, AS MS being MS thought because we are gods we will make up our own rules and ignore W3C, and surly as we are gods they will follow and obey these rules, (this seems familiar, bit like stargate), but they didn't so we have IE conditional comments to apply styling rules to specific versions of crappy IE, as they take years and years, and several versions until in version 9 its finally getting closer as showing the same but still buggy and slow in some cases, They state claiming as advertised, IE9 is 'fast', and is 'beautiful' and all that b-u-l-l-s-h-i-t and please, please use our crappy browser...Please! it makes me laugh everytime.Anyhoo, you can add IE version specific css styling in separate stylesheets and target the like <!--[if IE 7]><link href="ie7.css" rel="stylesheet" type="text/css" /><![endif]--> Other IE specific version conditional comments <!--[if IE]>According to the conditional comment this is IE<br /><![endif]--><!--[if IE 6]>According to the conditional comment this is IE 6<br /><![endif]--><!--[if IE 7]>According to the conditional comment this is IE 7<br /><![endif]--><!--[if IE 8]>According to the conditional comment this is IE 8<br /><![endif]--><!--[if IE 9]>According to the conditional comment this is IE 9<br /><![endif]--><!--[if gte IE 8]>According to the conditional comment this is IE 8 or higher<br /><![endif]--><!--[if lt IE 9]>According to the conditional comment this is IE lower than 9<br /><![endif]--><!--[if lte IE 7]>According to the conditional comment this is IE lower or equal to 7<br /><![endif]--><!--[if gt IE 6]>According to the conditional comment this is IE greater than 6<br /><![endif]--><!--[if !IE]> -->According to the conditional comment this is not IE<br /><!-- <![endif]--> The external style sheet is not even being listed in firebug at all! usually you would see both, and the styling listed at top having the highest precedence and list where/which stylesheet it belongs to.

Download Operas mobile phone emulator, it does not have iphone, but i don't use it that much, and so have not updated it. This emulators shows the same results you are getting, and i think it is down to the font-family, it looks as though it is using a different font, so different font, different space taken up. So i have change left, top unit to em that should reflect the same distance depending on font used, adding a css styling to target mobile device and it seems to work! img.stargate, img.unactivated { left: 4.37em; margin: 0 auto; position: absolute; top: 0.3em;} @media only screen and (max-device-width: 950px) {img.unactivated, img.stargate{left: 4.8em; top: 0.25em; }.relative span {font-size: 1.2em;}

??? the css styling for #wrap, at your link #1 post, ONLY consists of #wrap { min-height:900px; }

SEO is more related to content, than html although it it important when using <h1> to <h6> heading tag as these usually would contain keywords that google will use in search results. IT would help if you supply actual html code AND css code, screenshot, even a link, so we can get a better understanding of the problem.

Sprite image won't work for image as its used as background, and you are not supposed to use background-image on img element, but it can be used for anchor element.

Well it would help if it HAD a actual title to retrieve, just a suggestion but i think its pretty valid.

<style type="text/css">.header_bg{position:absolute;background-color: #ccc;opacity: 0.5;filter:alpha(opacity=50); left:0; right:0; top:0; z-index:0;bottom:0;}.header, .header h1{position:relative;}</style> <div class="header"><div class="header_bg"> </div><h1>Header</h1></div> <div class="content"> <p>some example text....</p> <p>some example text....</p> <p>some example text....</p> <p>some example text....</p> </div></div>

http://w3schools.invisionzone.com/index.php?showtopic=43367&pid=239374&st=0entry239374

Just to point out if you had it the other way round p, h1, h2, h3, h4, a, li {color:#000000;} #main p, h1, h2, h3, h4, a, li {color:#ffffff;}All h1, h2, h3, h4, a, li would have WHITE text, except any p tag outside of #main parent element which would remain black

You don't have a closing for style, OR image tag<div id="content"><a href="#"><img src="images/template.png" alt="our img" style="border: 1px solid #000101;"> </a><!--CONTENT ENDS--></div>

if you had #main p, h1, h2, h3, h4, a, li { color:#ffffff;}p, h1, h2, h3, h4, a, li { color:#000000;}all p, h1, h2, h3, h4, a, and li would have black text Except p tag in parent element with id main which will remain white, as any element with parent id ref will have higher styling precedence over selectors that are without. To change colour of text to white for rest of h1, h2, h3, h4, a, and li within parent #main element you would add prefix of #main #main p, #main h1, #main h2, #main h3, #main h4, #main a, #main li { color:#ffffff;}