http://cssdiscussion.com CSS Discussion en http://backend.userland.com/rss http://cssdiscussion.com/viewtopic.php?pid=596#596 596@http://cssdiscussion.com Topic: Need help with nav bar Message: Hi-A friend helped me code a nav bar in css and now I'm cleaning it up to use. The only problem is I have a tab that is active and when you roll over the other tabs it should become inactive, but it doesn't. It stays on all the time. I can't seem to get the html to display here properly, but you can see it through your browser I guess. You can see it at:www.lisakruczek.com/prison/navtest.html The css is[#nav {    margin:0px 0 0px 0;    font-family: Arial, Helvetica, sans-serif;    text-align: center;}/* the styling */#nav {width:400px; height:20px; background:#666699; position:relative;}#nav .select, #nav .current {margin:0; padding:0; list-style:none;}#nav li {display:inline; margin:0; padding:0; height:auto;}#nav .select a,#nav .current a {    display:block;    height:20px;    float:left;    background:#666699;    padding:0 10px 0 10px;    text-decoration:none;    font-size:15px;    line-height:20px;    white-space:nowrap;    color:#fff;    font: arial, helvetica;    font-style: normal;}* html #nav .select a, * html #nav .current a {width:1px; height:20px;}#nav .select a:hover, #nav .select li:hover a {    background:#333366;    cursor:pointer;    color:#FFF;}#nav .sub {display:none;}/* for IE5.5 and IE6 only */#nav table {position:absolute; border-collapse:collapse; left:0; top:0;}#nav .current a {background:#333366; color:#FFF;}#nav .sub li a:hover, #nav .select a:hover .sub li a:hover, #nav .select li:hover .sub li a:hover {    background:#333366;    color:#FFFFFF;    text-decoration: underline;}#nav .sub_active .current_sub a, #nav .sub_active a:hover {background:#333366; color:#FFF;text-decoration: underline;}#nav .select li a:hover .sub, #nav .select li:hover .sub {display:block; position:absolute; width:603px; top:20px; left:0; background:#333366; margin-top:0; padding:0; z-index:100; color:#fff; font-size:12px;}#nav .sub, #nav .sub_active {margin:0; padding:0; list-style:none;}#nav .sub_active {display:block; position:absolute; width:603px; top:20px; left:0; background:#333366; margin-top:0; padding:0; z-index:10;}* html #nav .sub_active, * html #nav .select a:hover .sub {z-index:-1; margin-top:0; margin-t\op:1px;}#nav .sub_active a {height:21px; text-decoration:none; line-height:20px; white-space:nowrap; display:block; float:left; background:#333366; padding:5px 10px 10px 10px; margin:0; font-size:12px; white-space:nowrap; border:0; color:#fff;}#nav .select a:hover .sub li a, #nav .select li:hover .sub li a {display:block; background:#333366; padding:5px 10px 10px 10px; margin:0; white-space:nowrap; border:0; color:#fff; font-size:12px;}]ThanksLisa Mon, 23 Aug 2010 21:36:50 +0100 http://cssdiscussion.com/viewtopic.php?pid=595#595 595@http://cssdiscussion.com Topic: related to css editor Message: hello,i want to develop an application which take the input as .html file and open it on the screen and after selection of any text or group of text, i change the properties of selected text which are available on the panel. During this process one new css file will be created, which will linked with html file.... guys...i have this idea and i want to develop such type of application. please suggest me which programming language i use to deploy this application.plz suggest me, my email id is : dixitwadhwani@gmail.com Mon, 09 Aug 2010 18:52:27 +0100 http://cssdiscussion.com/viewtopic.php?pid=593#593 593@http://cssdiscussion.com Topic: Google Map div not allowing another div horizontally Message: Update: This has been fixed... An inadvertent "Clear" was clearing the outer "DIV", and the content didn't "know" where to go... Wed, 04 Aug 2010 02:12:43 +0100 http://cssdiscussion.com/viewtopic.php?pid=592#592 592@http://cssdiscussion.com Topic: Google Map div not allowing another div horizontally Message: I'm trying to get a Google map to display with some table data beside it on the right... Tried all kinds of CSS variations, but I think I need to understand more about the hierarchy of things...     at any rate, here's the page :  http://gno-inc.com/test_map.htm   I stripped out all CSS from my css file, if someone can suggest what'd work, I'll do the work and read up on it...    Or show me, I'm not too proud to take some advice/criticism...    thanks...     Michael Tue, 03 Aug 2010 20:56:00 +0100 http://cssdiscussion.com/viewtopic.php?pid=591#591 591@http://cssdiscussion.com Topic: A typical 3 coloumn "jelly" page! Message: Ok i found out a fix for this, and any of you that are interested may look at it:HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>3 Coloumns</title> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> </head> <body> <div id="wrapper"> <div id="header"> <h1>header</h1> </div> <div id="menu"> </div> <div id="sidebarleft"> <h1>sidebar</h1> Quisque accumsan urna posuere mauris pulvinar quis tempus neque semper. Donec sit amet erat vel dolor sollicitudin commodo et eget arcu. Nam porttitor posuere risus et semper. Maecenas venenatis neque vitae orci aliquet non ultricies erat sollicitudin. In eu diam id mauris interdum sodales eu at nunc. </div> <div id="main"> <h1>main content</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus consectetur lobortis velit nec rhoncus. <q>Cum sociis natoque penatibus et magnis dis parturient montes</q> nascetur ridiculus mus. Fusce non viverra sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <blockquote>Praesent vitae ultricies ipsum.</blockquote> Duis condimentum libero at arcu fermentum at suscipit quam commodo. Praesent nec nunc a lorem porttitor hendrerit. Pellentesque et enim viverra diam ultrices egestas. Pellentesque porttitor ornare mollis. Praesent euismod eleifend suscipit. Aliquam ut lacus at lectus vestibulum tristique. Proin porttitor placerat velit, vitae egestas lectus imperdiet ut. Sed tempus malesuada ipsum ut pretium. Curabitur sollicitudin condimentum nisi, non tincidunt nibh aliquam non. Cras adipiscing bibendum odio. Proin aliquet sem ac eros laoreet lacinia. Nullam viverra turpis vel mi posuere elementum interdum odio volutpat. Pellentesque eleifend lacinia auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin sagittis varius arcu sit amet eleifend. </div> <div id="sidebarright"> <h1>sidebar</h1> Quisque accumsan urna posuere mauris pulvinar quis tempus neque semper. Donec sit amet erat vel dolor sollicitudin commodo et eget arcu. Nam porttitor posuere risus et semper. Maecenas venenatis neque vitae orci aliquet non ultricies erat sollicitudin. In eu diam id mauris interdum sodales eu at nunc. </div> <div id="footer"> <h1>footer</h1> Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </div> </div> </body> </html> CSS body { background-color: #191719; font-family: Georgia, "Times New Roman", Times, serif; font-size: small; margin: 0px; } #wrapper { width: 1100px; padding-top: 5px; padding-bottom: 5px; background-color: #303740; margin-left: auto; margin-right: auto; } #header { margin: 10px; height: 50px; text-align: center; line-height:15px; border: medium dashed #FFFFFF; text-transform: uppercase; } #main { text-align: center; background-color: #303740; font-size: 105%; padding: 15px; padding-top:5px; margin: 0px 0px 10px 0px; width: 652px; float: left; border: medium dashed #FFFFFF; } #main h1 { background-color:#2f5359; margin-top:0px; margin-bottom:20px; background-color: #303740; font-size: 140%; padding: 15px; border: medium dashed #FFFFFF; } #main q { color: #2f5359; background-color: #303740; font-size: 120%; font-style: italic; margin: 2px; } #main blockquote { color: #2f5359; background-color: #303740; font-size: 120%; font-style: italic; margin-right: 300px; padding-bottom: 10px; padding-top: 10px; border: thin dashed #FFFFFF; } #sidebarleft { text-align: center; background-color: #303740; font-size: 105%; padding: 15px; margin: 0px 10px 10px 10px; width: 150px; float: left; border: medium dashed #FFFFFF; } #sidebarright { text-align: center; background-color: #303740; width: 150px; font-size: 105%; padding: 15px; margin: 0px 10px 10px 904px; border: medium dashed #FFFFFF; } #menu { background-color: #303740; font-size: 105%; text-align: center; height: 20px; padding: 15px; margin: 0px 10px 10px 10px; border: medium dashed #FFFFFF; } #footer { background-color: #303740; text-align: center; padding: 15px; margin: 10px; font-size: 90%; clear: left; border: medium dashed #FFFFFF; } Working Example:Link Sun, 01 Aug 2010 09:22:08 +0100 http://cssdiscussion.com/viewtopic.php?pid=590#590 590@http://cssdiscussion.com Topic: A typical 3 coloumn "jelly" page! Message: Probably been a topic before, but i couldnt find with the search.All im after is a simple straight forward 3 coloumn page with divs!What i got so far is:Link to pageHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>3 Coloumns</title> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> </head> <body> <div id="wrapper"> <div id="header"> <h1>header</h1> </div> <div id="menu"> menuitem 1 menuitem 2 menuitem 3 menuitem 4 </div> <div id="sidebarleft"> <h1>sidebar</h1> Quisque accumsan urna posuere mauris pulvinar quis tempus neque semper. Donec sit amet erat vel dolor sollicitudin commodo et eget arcu. Nam porttitor posuere risus et semper. Maecenas venenatis neque vitae orci aliquet non ultricies erat sollicitudin. In eu diam id mauris interdum sodales eu at nunc. </div> <div id="main"> <h1>main content</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus consectetur lobortis velit nec rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce non viverra sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent vitae ultricies ipsum. Duis condimentum libero at arcu fermentum at suscipit quam commodo. Praesent nec nunc a lorem porttitor hendrerit. Pellentesque et enim viverra diam ultrices egestas. Pellentesque porttitor ornare mollis. Praesent euismod eleifend suscipit. Aliquam ut lacus at lectus vestibulum tristique. Proin porttitor placerat velit, vitae egestas lectus imperdiet ut. Sed tempus malesuada ipsum ut pretium. Curabitur sollicitudin condimentum nisi, non tincidunt nibh aliquam non. Cras adipiscing bibendum odio. Proin aliquet sem ac eros laoreet lacinia. Nullam viverra turpis vel mi posuere elementum interdum odio volutpat. Pellentesque eleifend lacinia auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin sagittis varius arcu sit amet eleifend. </div> <div id="sidebar"> <h1>sidebar</h1> Quisque accumsan urna posuere mauris pulvinar quis tempus neque semper. Donec sit amet erat vel dolor sollicitudin commodo et eget arcu. Nam porttitor posuere risus et semper. Maecenas venenatis neque vitae orci aliquet non ultricies erat sollicitudin. In eu diam id mauris interdum sodales eu at nunc. </div> <div id="footer"> <h1>footer</h1> Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </div> </div> <!-- End of wrapper --> </body> </html> CSS body { background-color: #191719; font-family: Georgia, "Times New Roman", Times, serif; font-size: small; margin: 0px; border: medium dashed #FFFFFF; } #wrapper { width: 1100px; padding-top: 5px; padding-bottom: 5px; background-color: #303740; margin-left: auto; margin-right: auto; } #header { margin: 10px; height: 50px; text-align: center; border: medium dashed #FFFFFF; text-transform: uppercase; } #menu { background-color: #303740; font-size: 125%; text-align: center; height: 20px; padding: 15px; margin: 0px 10px 10px 10px; border: medium dashed #FFFFFF; line-height: 20px; } #main { background-color: #303740; font-size: 105%; padding: 15px; margin: 0px 10px 10px 10px; width: 800px; border: medium dashed #FFFFFF; } #sidebarleft { background-color: #303740; font-size: 105%; padding: 15px; margin: 0px 850px 10px 10px; border: medium dashed #FFFFFF; } #sidebar { background-color: #303740; font-size: 105%; padding: 15px; margin: 0px 10px 10px 850px; border: medium dashed #FFFFFF; } #footer { background-color: #303740; text-align: center; padding: 15px; margin: 10px; font-size: 90%; clear: left; border: medium dashed #FFFFFF; } I cant seem to figure out how i would be going forward from where i stand. I have tried alot different things, but either ways where any good. What is wrong here?I have a working example of a 2 coloumn page right here!Feel free to use it if you want.Thanks in advance for all replies.Dan-Levi Sat, 31 Jul 2010 18:30:37 +0100 http://cssdiscussion.com/viewtopic.php?pid=589#589 589@http://cssdiscussion.com Topic: please tell me why this lists as a vertical nav Vs. horizontal Message: <!--- <div class="navMain"> ---> <a href="/index.cfm" title="Fishtank Brand Advertising"><img src="/images/fishtank_logo.png" border="0" alt="Fishtank Brand Advertising" title="Fishtank Brand Advertising" class="mainLogo" /></a> <!--- <div class="navMainItems"> ---> <a href="/index.cfm" <cfif pageName EQ "Work"><cfoutput>class="navItemOn"</cfoutput></cfif> title="What we've been up to."><div class="navItem" onMouseOver="$(this).setStyle({backgroundImage: 'url(/images/nav_bullet_on.png)'});" onMouseOut="$(this).setStyle({backgroundImage: 'none'});"><span class="navItemNoChange">OUR</span> WORK</div></a> <a href="/ourstory.cfm" <cfif pageName EQ "Story"><cfoutput>class="navItemOn"</cfoutput></cfif> title="Creative cranking New Yorkers + zen thinking West Coasters."><div class="navItem" onMouseOver="$(this).setStyle({backgroundImage: 'url(/images/nav_bullet_on.png)'});" onMouseOut="$(this).setStyle({backgroundImage: 'none'});"><span class="navItemNoChange">OUR</span> STORY</div></a> <!-- <a href="/ourmission.cfm" <cfif pageName EQ "Mission"><cfoutput>class="navItemOn"</cfoutput></cfif> title="Our Generation."><div class="navItem" onMouseOver="$(this).setStyle({backgroundImage: 'url(images/nav_bullet_on.png)'});" onMouseOut="$(this).setStyle({backgroundImage: 'none'});"><span class="navItemNoChange">OUR</span> MISSION</div></a> --> <a href="/ourpeople.cfm" <cfif pageName EQ "People"><cfoutput>class="navItemOn"</cfoutput></cfif> title="Meet the people behind the curtain."><div class="navItem" onMouseOver="$(this).setStyle({backgroundImage: 'url(/images/nav_bullet_on.png)'});" onMouseOut="$(this).setStyle({backgroundImage: 'none'});"><span class="navItemNoChange">OUR</span> PEOPLE</div></a> <a href="/ourawards.cfm" <cfif pageName EQ "Awards"><cfoutput>class="navItemOn"</cfoutput></cfif> title="Everyone likes accolades, right?"><div class="navItem" onMouseOver="$(this).setStyle({backgroundImage: 'url(/images/nav_bullet_on.png)'});" onMouseOut="$(this).setStyle({backgroundImage: 'none'});"><span class="navItemNoChange">OUR</span> AWARDS</div></a> <a href="/ourclients.cfm" <cfif pageName EQ "Clients"><cfoutput>class="navItemOn"</cfoutput></cfif> title="See who's keeping the lights on."><div class="navItem" onMouseOver="$(this).setStyle({backgroundImage: 'url(/images/nav_bullet_on.png)'});" onMouseOut="$(this).setStyle({backgroundImage: 'none'});"><span class="navItemNoChange">Our</span> Clients</div></a> <a href="http://www.fishtankba.com/HangTen/" target="_blank" title="Keeping our toes on the nose of refreshingly current trends."><div class="navItem" onMouseOver="$(this).setStyle({backgroundImage: 'url(/images/nav_bullet_on.png)'});" onMouseOut="$(this).setStyle({backgroundImage: 'none'});"><span class="navItemNoChange">GO</span> HANGTEN</div></a> <div class="navItemDivider"><img src="/images/nav_divider.png" alt="San Diego Advertising and Branding Agency" title="San Diego Advertising and Branding Agency" /></div> <a href="mailto:gofish@fishtankba.com?subject=New Business Inquiry."><div class="navItemEmail" onMouseOver="$(this).setStyle({backgroundImage: 'url(/images/nav_bullet_on.png)'});" onMouseOut="$(this).setStyle({backgroundImage: 'none'});"><span class="navItemEmail">Drop us a line...</span></div></a> <!--- </div> </div> ---> Fri, 16 Jul 2010 21:09:54 +0100 http://cssdiscussion.com/viewtopic.php?pid=588#588 588@http://cssdiscussion.com Topic: Text padding does not work Message: Hi CSSERS,I have a problem with a file.here is a video link to explain it:http://www.designshoptoronto.com/Diddley/CSS.movand some links to the css:http://www.designshoptoronto.com/Diddley/style.cssand html files:http://www.designshoptoronto.com/Diddley/test2.htmlDoes any body know what I am doing wrong?Please help when you get a chance.Thanks,Tracey Wed, 16 Jun 2010 19:58:52 +0100 http://cssdiscussion.com/viewtopic.php?pid=587#587 587@http://cssdiscussion.com Topic: How do you do this in CSS? Message: Hi there, sorry i am super new to web developmentbasically i am trying to mimic the design at this site http://github.com/robmonie/jquery-week-calendar.giti am only focusing on the background designI believe it is done in CSS right? and not some image slicer, i originally thought it was done using tables, but it is not after i check the source.not being an expert in CSS, i was not able to find out which CSS file and lines are making this happeningbasically in that site, you see:the top has a white-grey color, and bottom border line has a dark grey color,middle is all white, and bottom has blue and dark blue on top of iti just want to reproduce the 3 sections mentioned above, nothing fancy,any help is appreciated.thank you. Thu, 10 Jun 2010 15:56:42 +0100 http://cssdiscussion.com/viewtopic.php?pid=586#586 586@http://cssdiscussion.com Topic: Wrapping text Message: Hi.  I'm extremely used to designing by coding with HTML tables, but now I'm trying to make the conversion to CSS design.  What I can't seem to find is how, within a P, DIV, or SPAN tag set, to have a block of text (such as a Google Adsense ad) in the upper left corner, with the rest of any other page content off to the right of it and eventually under it and continuing across the whole page.  Below I have the HTML content.  Any ideas on how to accomplish this in CSS?Thanksbhomis          <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=850>           <TR>            <TD WIDTH=850 ALIGN="LEFT" VALIGN="TOP">             <TABLE WIDTH=280 HEIGHT=260 CELLPADDING=0 CELLSPACING=0 BORDER=0 ALIGN="LEFT" VALIGN="TOP">              <TR>               <TD WIDTH=250 HEIGHT=250>google adsense code here                </TD>               </TR>              </TABLE><BR>              <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>               <TR>                <TD ALIGN="LEFT" VALIGN="TOP">Lots of text here.  Imagine a page with the ad in the upper left corner, and text to the right of it and eventually under it.  I don't want text solely to the right.                </TD>               </TR>              </TABLE>             </TD>            </TR>          </TABLE> Sat, 29 May 2010 02:17:19 +0100 http://cssdiscussion.com/viewtopic.php?pid=585#585 585@http://cssdiscussion.com Topic: Container won't stretch with more content Message: Hi all, I was wondering why my container won't stretch vertically when I add more content to one of the <div> I have? Here is the CSS I have: body {margin : 0;padding : 0;font : 75% "Trebuchet MS", verdana, arial, sans-serif;color : #666;background : #003250 url(img/bgd.png) center repeat;}#container {width : 740px;margin-left : auto;margin-right : auto;margin-top : 20px;padding : 20px;line-height: 1.7em;color : #666;background : #f2f2f5;}            /*TOP BANNER*/#banner {float : left;width : 510px;height : 200px;padding : 0;margin : 0 0 10px 0;}            /*TOP SCROLLBAR*/div.scroll {overflow : auto;height : 7em;width : 160px;padding : 1em;color : #333;background : inherit;border : 1px solid #aaa;margin : 20px;}#bannerb {float : right;width : 210px;margin : 0 0 10px 0;padding : 0;}            /*TOP NAVIGATION*/#navcontainer {clear:both;width : 100%;}#navcontainer ul {padding-left: 0;margin-left: 0;background: #F36207;color: #fff;float: left;width: 100%;}#navcontainer ul li {display: inline;}#navcontainer ul li a {padding: 0.2em 1em;background: #F36207;color: #fff;text-decoration: none;float: left;border-right: 1px solid #fff;}#navcontainer ul li a:hover {background: #036;color: #fff;}#active a:link, #active a:visited, #active a:hover {background: #036;color: #fff;}            /*CENTRE CONTENT*/#content {padding : 5px;margin-left : 205px;margin-right : 205px;background : #f7f7f7;color : #666;}            /*LEFT CONTENT*/#sidebar {float : left;width : 180px;margin : 0 5px 0 0;padding : 5px;color : #666;background : #f2f2f5;}            /*LEFT MENU*/#menu {width : 180px;padding : 10px 0 0 0;}#menu ul {margin : 0;padding : 0;list-style-type : none;}#menu li {margin : 0 0 0.1em 0;}#menu a {width : 160px;padding : 0.1em 0.8em;text-decoration : none;display : block;color : #fff;background : #f36207;}#menu a:hover {background : #036;color : #fff;}            /*RIGHT CONTENT*/#sidebar-b {float : right;width : 180px;margin : 0 0 0 5px;padding : 5px;background : #f2f2f5;color : #333;}            /*FOOTER*/#footer {clear : both;padding : 5px;margin-top : 15px;color : #bbd2e0;background : #f36207;}#footer a:link, #footer a:visited {background : inherit;color : #eee;text-decoration : none;}#footer a:hover {border-bottom : 1px dashed #f2f2f5;background : inherit;color : #f2f2f5;}            /*TYPOGRAPHY*/p {margin : 10px;}h1 {margin : 0 0 10px 10px;font : normal 1.3em verdana, arial, tahoma, sans-serif;letter-spacing: 3px;color : #036;background : inherit;}h2 {padding-left : 5px;font : bold 1em verdana, arial, tahoma, sans-serif;color : #ef7329;background : inherit;}blockquote {font-weight : bold;font-style : italic;color : #b29b35;}            /*LINKS*/a {text-decoration : none;color : #f36207;background : inherit;}a:hover {color : #0d4953;background : inherit;}            /*CLASSES*/.news {font-size : 1em;background : inherit;color : #000;}.orange {background : inherit;color : #f36207;}.clear {clear : both;} Fri, 21 May 2010 13:02:25 +0100 http://cssdiscussion.com/viewtopic.php?pid=584#584 584@http://cssdiscussion.com Topic: Football CSS Image Map Message: Hello..i run a football club and i run the website of the club..im thinking for the next season to have a team photo (like the background of my website www.longbentonfc.co.uk) on the team page. and when you scroll your mouse over the player the stands out and displays some basical information of the player (name, position, signed, nationality)for example i have found this website which shows basically what i want..  http://www.cssplay.co.uk/menu/imap.html im thinking more of the second example. With the mouse over the player it will highlight that player and display that information and by clicking on the player bring up a seperate pop up of the players information.im not very good at css.. i know how to edit it but not good at the general coding. would anyone be able to help. i would be very grateful.Andy Fri, 14 May 2010 17:57:36 +0100 http://cssdiscussion.com/viewtopic.php?pid=583#583 583@http://cssdiscussion.com Topic: Alternate background image using CSS image map Message: Hello..i run a football club and i run the website of the club..im thinking for the next season to have a team photo (like the background of my website www.longbentonfc.co.uk) on the team page. and when you scroll your mouse over the player the stands out and displays some basical information of the player (name, position, signed, nationality)for example i have found this website which shows basically what i want..  http://www.cssplay.co.uk/menu/imap.html im thinking more of the second example. With the mouse over the player it will highlight that player and display that information and by clicking on the player bring up a seperate pop up of the players information.im not very good at css.. i know how to edit it but not good at the general coding. would anyone be able to help. i would be very grateful.Andy Fri, 14 May 2010 17:56:35 +0100 http://cssdiscussion.com/viewtopic.php?pid=581#581 581@http://cssdiscussion.com Topic: content limit in element Message: From what I can tell, the problem is this:you have your outer box as a fixed width:        #spdisplay {           width: 550px;but then you also have an inner div with a "box" class with a narrower width:        #spdisplay .box {           width: 545px;but you also have padding assigned to "box":           padding:10px 10px 15px 10px;padding is in addition to the width of an object, so 545px + 10px left + 10px right padding = 565px, which is a total of 15px wider than the outer spdisplay div.It's a numbers game, and you have to make sure the content of an item, including widths+padding+margins == the same width as the parent object. Otherwise you will have unexpected results, especially cross-browser, cross platform. Tue, 27 Apr 2010 15:54:51 +0100 http://cssdiscussion.com/viewtopic.php?pid=580#580 580@http://cssdiscussion.com Topic: Styles on a PC and Mac... Message: st3v373 wrote:Is using percentages the only was to make sure your screen fits no matter what screen resolution is used or pc vs. mac. No.. you can use 'ems' as a unit of measurement as well... Tue, 27 Apr 2010 15:37:36 +0100