|
CSS - Div Padding Problem
I'm using the following code. I'd like the DIV that surounds the up / down images to more tightly wrap the images (there is too much space between the top and bottom border and the images). I'm having trouble understanding how to accomplish this.
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<style>
.nav_box {
width: 95%;
padding: 1px 1px 1px 2px;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #003366;
background-color: #eef7ff;
text-align : left;
}
</style>
</head>
<body>
<div class="nav_box">
<img ... />
<img ... />
Row Zero
</div>
</body>
</html>
Similar TutorialsIm running IE6 and its on an Intranet so for the moment Im only keen on getting it to work in IE5/6. I have got the following HTML and CSS. When I remove the CSS 'display: block; padding-bottom: 0px;' the links list views fine, but when I include it, the list spaces right out and I can't control the level of padding. Its really weird.. Im pretty sure this is where the error is but Im not exactly sure what it is.. I have not had problems in the past implementing a display type of BLOCK before, so not sure what is doing it now... Any ideas would be great... Can post the whole template and assets if that helps... Code:
<ul><li class="mainNav"><a href="about.htm" onMouseOver="MM_showMenu(window.mm_menu_1111120312_5,180,160,null,'navigation1');" onMouseOut="MM_startTimeout();">About Us</a></li>
<li class="mainNav"><a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1015140727_0,170,170,null,'navigation1');">Our Programs</a></li>
<li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1020105028_0,170,185,null,'navigation1');">Managing our People</a></li>
<li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1020115125_0,170,195,null,'navigation1');">Managing our Money</a></li>
<li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();"
onMouseOver="MM_showMenu(window.mm_menu_1020121338_4,170,220,null,'navigation1');">Supporting our Business</a></li>
<li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1020121623_3,170,235,null,'navigation1');">Ministerial and Parliamentary</a></li>
<li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1020121709_2,170,255,null,'navigation1');">IT Systems & Support</a></li>
<li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1020121752_1,170,275,null,'navigation1');">Staff New & Events</a></li>
<li class="mainNav"> <a href="1.htm" onMouseOut="MM_startTimeout();" onMouseOver="MM_showMenu(window.mm_menu_1020121857_0,170,290,null,'navigation1');">Staff & Territory Offices</a></li>
</ul>
##############
CSS
li.mainNav {
list-style: url('../images/common/navarrow.gif');
margin-bottom: 5px;
font-size : .80em;
}
li.mainNav a:link {
display: block;
padding-bottom: 0px;
color: #283164;
text-decoration: none;
}
li.mainNav a:visited{
display: block;
padding-bottom: 0px;
text-decoration: none;
}
li.mainNav a:hover {
display: block;
padding-bottom: 0px;
text-decoration: underline;
}
li.mainNav a:active {
display: block;
padding-bottom: 0px;
text-decoration: underline;
}
Hello friends I try to put padding and borders in a image with the follow code : img { border: 1px solid #666666; padding: 3px; } It works with the firefox and opera but not with IE ... Why? Thanks The line "between" the columns is actually a background image in the second column. I'd like to reduce the area between the top of the text and the top of the div (so the text is about even with the line). I've tried setting the padding to 0, but that has no effect. Any ideas? Code: #inner_wrap_2_col {
margin:0 auto;
width:690px;
}
#news_col_left {
float:left;
width:345px;
color: #330;
line-height: 1.5em;
padding: 0;
}
#news_col_right {
float:right;
width:345px;
color: #330;
line-height: 1.5em;
background:url("./images/news_bg.gif");
background-repeat: repeat-y;
}
Hello. I have a horizontal nav bar with a background color. When I add left padding it does do that but adds that amount of space onto the right side of the div so it's sticking out of my layout. What am I doing wrong? Here is my code: Code: body {
font-family: Arial, Helvetica, sans-serif;
background-color: #C0BFAB;
background-position: 195px 140px;
margin-left: auto;
margin-right: auto;
width:800px;
}
#header {
position: absolute;
margin-left: 140px;
margin-top: 5px;
width: 790px;
height: 173px;
z-index: 2;
background-image:url(images/header.gif)
}
#topnav {
position: absolute;
margin-left: 140px;
margin-top: 178px;
width: 790px;
height: 17px;
padding-left: 2em;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color:#C0BFAB;
background-color:#786350;
z-index: 31;
}
#main {
position: absolute;
margin-left: 140px;
margin-top: 195px;
width: 790px;
height: 606px;
z-index: 3;
}
#footline {
position: absolute;
margin-left: 140px;
margin-top: 802px;
width: 790px;
height: 13px;
background-color:#786350;
z-index: 18;
}
#footer {
position: absolute;
margin-left: 140px;
margin-top: 815px;
width: 790px;
height: 34px;
z-index: 19;
background-image: url(images/footer.gif);
top: 0px;
}
#bottomnav {
position: absolute;
margin-left: 140px;
margin-top: 815px;
width: 790px;
height: 13px;
padding-right: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color:#786350;
text-align: right;
z-index: 32;
}
.binkwaffle {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
background-image: url(images/Aric-Smiling-gradient-BG.gif);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
}
.style1 {
font-family: Georgia, "Times New Roman", Times, serif;
background-color: #FFFFFF;
background-image: url(images/Aric-Smiling-gradient-BG.gif);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
font-size: 14px;
}
Code: <HTML>
<HEAD>
<TITLE>binkwaffle</TITLE>
<style type="text/css">
<!--
@import url(binkwaffle_test.css);
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</HEAD>
<BODY LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<div id="header"></div>
<div id="main" class="binkwaffle"></div>
<div id="footline"></div>
<div id="footer"></div>
<div id="topnav">home cards faq about contact</div>
<div id="bottomnav">home cards faq about contact</div>
</BODY>
</HTML>
Also the centering doesn't seem to be working. Thanks for the help. Heyhey Probably a very simple solution to this, but I just can't find it. Nesting DIVs and adding padding to the parent, so I can position the DIV within. I'm subtracting the amount of padding I am using from the width and height so that everything else around it will fit ok. Works fine in all browsers, apart from IE 5.5, which ignores the padding (thus making the div too small because of the subtracting of width and height from the parent DIV). Sample code: #holdera { background:url(images/header_banner_a.png) no-repeat; width:80px; height:57px; padding-top:25px; padding-left:80px; float:left; } #buttona { width:62px; height:27px; } I could use margins on the inner DIV instead, but that brings up a problem with Netscape. The DIV positions shift because of no padding on the parent. Real pain, anybody have any suggestions? Cheers Admin Page Okay, on that page the left side navigation menu I setup a table along with some DIV tags with CSS to put a little border around each division of the page. For some reason the padding around the header for each box is rather large when I view it in internet explorer. I set the padding to 1px on the header div and the nav div. The odd thing is in dreamweaver's preview window everything looks fine except for a spilt between each div tag. Am I missing something? Here is part of my CSS code: /*Admin Page*/ H1 {font-size:20px; text-align:center; text-indent: .1em; font-weight:bold; font-family:Garamond; letter-spacing: .1em } H2 {font-size:18px; text-align:center; text-indent: .1em; font-weight:bold; font-family:Garamond; letter-spacing: .3em } .admin-nav{ font-size:14px; font-weight:400; font-family:Arial; border:1px solid black; padding: 10px; background-color:#CCCCCC } .admin-nav-header{ border:1px solid black; padding: 1px; background-color:#CCCCCC } I've written a menu in css and I want to show the user what page they are on by having a little block of colour next to the link that they are on. This link should explain it better: http://www.midwivesonline.com/test.html at least it will do in everything but IE6 on windows where it stretches out too far to the right. The problem lies in the css: http://www.midwivesonline.com/styles/test.css In particular: .currentpagep { padding-right: 155px; border-right: 5px solid #85306B; } If I set the padding-right to just 5px then it's perfect in IE6 but screwed up everywhere else. From the tests I've done I don't think that it's a doctype issue - but then again not sure what the solution is... I'd really appreciate any help on this, Cheers, Tim on my site http://www.fasttracksites.com/ i have the right column set to a width that has my padding subtracted from it so that it will sit off of the left border, and off of the right side, the overall div for the center of the page is 800px and everything is based off of this, the file containing my css is http://www.fasttracksites.com/stylesheets/main.css The problem is that even though the padding is set, the right column still sits on the borders, if anyone can help me fix this, i would greatly appreciate it Hi I'm having a problem with padding <a> tags in firefox i have a div inside another div. I'm using the 2nd div as a button but it doesn't fit inside the containing div. The top and bottom stick out. Any clues? here is my code: Code: <html>
<head>
<style type="text/css">
.mybox {
border: 1px solid #000000;
}
.buttonbox{
/*padding: 5px;*/
}
.buttonbox a{
padding: 5px;
background-color: #33F4FF;
border: 1px solid #FF0000;
}
.buttonbox a:hover{
background-color: #EBF4FF;
}
</style>
</head>
<body>
<div class="mybox">
<div class="buttonbox"><a href="asdfasfd">buttonbox</a></div>
</div>
</body>
</html>
Hi, I am finishing up my site and I have decided to add to footer image to each page but when I attempt to add it on a page that has padding whether it be after the text with padding or not the image is detached by approx the padding size from the bottom. I have been toying around for hours but with no success. I have also been reading some of the tutorials given to me by the members here which have helped greatly but I am stumped. The image in question is Code: <img src="images/footer.jpg" alt="For more information, please visit the FAQs or the forum." name="footer" id="footer" /> If you need me to upload the pics I can do that (website down atm hence the code instead of a url) (With how great you guys are, I can nearly guarantee that It will only require an extra line added to the css) Code: <!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" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="./index.css" media="all" /> <link rel="shortcut icon" href="http://torquesro.info/favicon.ico" /> <meta name="verify-v1" content="RhiSLQkMtmAKlbQN7TUe1DnWYD/Mxl0ROy7UiZlDGCU=" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>TorqueSRO - FAQ</title> <meta name="description" content="We offer tools for Silkroad Online in order to provide advanced functions, automate game options and deliver new functionality."/> <meta name="keywords" content="Silkroad, Silkroad Online, Torque, TorqueSRO, tClientless, silkroad clientless, silkroad walkthrough, silkroad tools, Mmorpg, silk, sr33, cheat, hack, sro"/> <meta name="copyright" content="Copyright TorqueSRO - 2009"/> <meta name="author" content="UrbanGrafix"/> <meta name="Distribution" content="Global"/> <meta name="Rating" content="General"/> <!--[if IE]> <style type="text/css" media="all">.borderitem {border-style:solid;}</style> <![endif]--> </head> <body> <div id="container"> <div id="main"> <a href="/index.html"><img src="images/HomeButton.jpg" id="HomeButton" alt="TorqueSRO" /></a> <a href="/tclientless.html"><img src="images/clientless.jpg" id="clientless" alt="tClientless" /></a> <a href="/faq.html"><img src="images/FaqButton.jpg" id="FaqButton" alt="FAQs" /></a> <a href="/videos.html"><img src="images/VideosButton.jpg" id="Links" alt="Videos" /></a> <a href="/forum"><img src="images/ForumButton.jpg" id="AboutButton" alt="Forum" /></a> </div> <div id="ad"> </div> <div id="main1"> <img src="images/mainlogo.jpg" alt="TorqueSRO" name="Domi2" id="Domi2" /><img src="images/Main2ndBannerSRO.jpg" alt="" name="Main2ndBanner" id="Main2ndBanner" /></div> <div id="Content"> <div id="ContentMain"> <p style="text-align: left"><a href="#a">Q. I’m getting an error when I run tClientless, it says the side-by-side configuration is incorrect.</a></p> <p style="text-align: left"><a href="#b">Q. How do I login multiple accounts?</a></p> <p style="text-align: left"><a href="#c">Q. tClientless crashed! Why did this happen?</a></p> <p style="text-align: left"><a href="#d">Q. How can I make a character a master for every character logged in through tClientless?</a></p> <p style="text-align: left"><a href="#e">Q. I want to delete an alias, how can I do that?</a></p> <p style="text-align: left"><a href="#f">Q. tClientless says the authentication failed and/or cannot connect to the server.</a></p> <p style="text-align: left"><a href="#g">Q. I missed out on the BETA, will I be able to use tClientless?</a></p> <p style="text-align: left"> </p> <p style="text-align: left"> </p> <p style="text-align: left"> </p> <p style="text-align: left"> </p> <p style="text-align: left"> </p> <p style="text-align: left"><strong><a name="a" id="a"></a>Q. I’m getting an error when I run tClientless, it says the side-by-side configuration is incorrect.</strong><br /> A. Download and install this: <a href="http://www.microsoft.com/DOWNLOADS/details.aspx?FamilyID=9b2da534-3e03-4391-8a4d-074b9f2bc1bf&displaylang=en">http://www.microsoft.com/DOWNLOADS/details.aspx?FamilyID=9b2da534-3e03-4391-8a4d-074b9f2bc1bf&displaylang=en</a> </p> <p style="text-align: left"><br /> <strong><a name="b" id="b"></a>Q. How do I login multiple accounts?</strong><br /> A. Simply type the account information and hit login again, tClientless will handle everything.</p> <p style="text-align: left"><br /> <strong><a name="c" id="c"></a>Q. tClientless crashed! Why did this happen?</strong><br /> A. Well, first you should note that tClientless is only in the BETA (development) stages. The reason it crashed it likely due to incorrect parsing, send the “lastpacket.txt” file to bot90210 so that I can fix this issue.</p> <p style="text-align: left"><br /> <strong><a name="d" id="d"></a>Q. How can I make a character a master for every character logged in through tClientless?</strong><br /> A. Go to File->Master Manager and enter the character’s name. They will be saved as a global master and will be able to use master commands for every character.</p> <p style="text-align: left"><br /> <strong><a name="e" id="e"></a>Q. I want to delete an alias, how can I do that?</strong><br /> A. Go to File->Alias Manager and delete the alias entry.</p> <p style="text-align: left"><br /> <strong><a name="f" id="f"></a>Q. tClientless says the authentication failed and/or cannot connect to the server.</strong><br /> A. This could happen for various reasons, the most common are that our server is experiencing issues or you are not registered with the BETA test.</p> <p style="text-align: left"><br /> <strong><a name="g" id="g"></a>Q. I missed out on the BETA, will I be able to use tClientless?</strong> <br /> A. Possibly. We’ve limited the users that can join the BETA because we don’t want to overload the server, if the server can handle 300 users comfortably then you will increase the limit. We’ve made tClientless connect to our servers because we’re sick of people posting it elsewhere.</p> </div> <img src="images/footer.jpg" alt="For more information, please visit the FAQs or the forum." name="footer" id="footer" /> </div> <form action="http://www.google.com/cse" id="cse-search-box" target="_blank"> <div align="right"> <input type="hidden" name="cx" value="partner-pub-4151060843783741:adaty3-25z5" /> <input type="hidden" name="ie" value="ISO-8859-1" /> <input type="text" name="q" size="20" /> <input type="submit" name="sa" value="Search" /> </div></form><script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /></a> </div> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-10605650-1"); pageTracker._trackPageview(); } catch(err) {}</script> <!-- Piwik --> <script type="text/javascript"> var pkBaseURL = (("https:" == document.location.protocol) ? "https://torquesro.info/piwik/" : "http://torquesro.info/piwik/"); document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 1); piwikTracker.trackPageView(); piwikTracker.enableLinkTracking(); } catch( err ) {} </script><noscript><p><img src="http://torquesro.info/piwik/piwik.php?idsite=1" style="border:0" alt=""/></p></noscript> <!-- End Piwik Tag --> </body> </html>
Code: html, body { margin:0; padding:0; } body { background-image: url(images/bglong209.png) ; background-repeat: repeat-x; text-align:center; padding:0px; } .p { margin:0px; padding:0px; font-size: inherit; font-family: inherit; font-weight: inherit; text-align: inherit; color: inherit; line-height: inherit; vertical-align: top; } #container { width:654px; margin:0px auto; top: 0; } #ad { } p { padding-top:0px; margin-top:0px; color: #000; background-color: #FFF; } img { border:0px; } .AbsWrap { position: relative; left: 0; } .rowWrap { width: 100%; } .clearfloat { clear:both; height:0px; } #main { width:654px; margin:0px auto; border: 0px none #f0f0f0; top:0; } #main1 { width:654px; border: 0px none #f0f0f0; margin:0px auto; } #main2 { width:654px; border: 0px none #f0f0f0; margin:0px auto; } #Content { background:#fff; clear:both; width: 654px; font-family: Arial, Helvetica, sans-serif; font-size:10px; } #ContentMain { padding-left: 10px; padding-right: 10px; padding-top: 20px; margin:0px auto; border: 0px none #f0f0f0; } #HomeButton { margin:0px auto; margin-top:0px; width:163px; height:47px; margin-bottom:0px; float:left; display:inline; } #clientless { margin-left:0px; margin-top:0px; width:164px; height:47px; margin-bottom:0px; float:left; display:inline; } #FaqButton { margin-left:0px; margin-top:0px; width:101px; height:47px; margin-bottom:0px; float:left; display:inline; } #Links { margin-left:0px; margin-top:0px; width:99px; height:47px; margin-bottom:0px; float:left; display:inline; } #AboutButton { margin-left:0px; margin-top:0px; width:127px; height:47px; margin-bottom:0px; float:left; display:inline; } #Domi { margin-left:0px; margin-top:59px; width:320px; height:272px; margin-bottom:0px; float:left; display:inline; font-size: 9px; } #Domi1 { margin-left:0px; margin-top:59px; width:334px; height:272px; margin-bottom:0px; float:left; display:inline; font-size: 9px; } #Domi2 { margin-left:0px; margin-top:59px; width:654px; height:271px; margin-bottom:0px; float:left; display:inline; font-size: 9px; } #tClientlessBanner { margin-left:0px; margin-top:59px; width:333px; height:192px; margin-bottom:0px; float:left; display:inline; } #MainBlueBanner1 { margin-left:0px; margin-top:0px; width:59px; height:83px; margin-bottom:0px; float:left; display:inline; } #colwrap3 { float:left; width:273px; margin-top:0px; margin-left:0px; } #DownloadButton { margin-left:0px; margin-top:0px; width:47px; height:48px; margin-bottom:0px; float:left; display:inline; } #colwrap5 { float:left; width:226px; margin-top:0px; margin-left:0px; border: 0px solid #f0f0f0; } #Downloadlatestversionbanner { margin-left:0px; margin-top:0px; width:226px; height:25px; margin-bottom:0px; float:left; display:inline; } #colwrap7 { float:left; width:89px; margin-top:0px; margin-left:0px; border: 0px solid #f0f0f0; } #BlueTinyBanner { margin-left:0px; margin-top:0px; width:7px; height:11px; margin-bottom:0px; float:left; display:inline; } #Bluelongbanner3 { margin-left:0px; margin-top:0px; width:89px; height:11px; margin-bottom:0px; float:left; display:inline; } #Bluelongbanner2 { margin-left:0px; margin-top:0px; width:137px; height:23px; margin-bottom:0px; float:left; display:inline; } #MainBlueBanner2Long { margin-left:0px; margin-top:0px; width:274px; height:35px; margin-bottom:0px; float:left; display:inline; } #Main2ndBanner { margin-left:0px; margin-top:0px; width:654px; height:87px; margin-bottom:0px; float:left; display:inline; } #interface { margin-left:0px; margin-top:0px; width:654px; height:615px; margin-bottom:0px; float:left; display:inline; } #footer { margin-left:0px; margin-top:0px; width:655px; height:93px; margin-bottom:0px; float:left; display:inline; } #Version { font-size:9px; color: #FFF; font-weight: bold; font-variant: small-caps; background-color: #416F7C; font-family: Verdana; text-align: left; } #container #Content #ContentMain p a font { color: #0000FF; }
Hi guys, I recently created a website for my Union, and am having some problems getting around a possible CSS error. Unfortunately the majority of our user base only has access to MS Internet Explorer 5, and it is within this browser that the CSS glitch is apparent: The 'Join the union' image link tends to push right to the left margin, and I'm unsure how to correct this without adversely affecting either Firefox or more recent versions of IE/Opera/Safari. Any help would be appreciated! Edit: would be easier if I gave you the link! http://www.algus.org.uk/ Sajid Hi, I have a problem with the css for the following page: http://www.designdictator.com/ For the img in the log i do use the following css: #content img { display : block; border : 1px solid #999; padding : 4px; margin : 20px 0; } but in IE6 the padding between the border and the img doesn't display. Firefox does all right. What's wrong? thanx jarra CSS pisses me off. Just about every new class I implement, I have to debug it for either IE or Firefox. I can't figure this one out, anybody wanna help? In Firefox, when I use padding on the #inner-box instance, the container overflows. It should only extend to the end of the white line. It works fine in IE. http://www.rhizaowns.com/holly/index.php (alas, it's the old problem: works in Firefox, Netscape and Safari ... but not MS IE) I'm attempting to build a series of words with a button-appearance created using span to specify background color and borders and margins. The code checks out at the w3.org validators. In the first 3 browsers it loooks exactly as intended. but in MS IE (v 5.2 Mac) it is completely screwed up: - line is left justified - individual words are right justified - most of the cells are blank - all cells run together (in fact they seem to be overlapped since one cannpt even guess which cell links to what other page) relevant HTML: <div style="text-align:center;"> <p> <span class="buttons"><a href="aboutDG.php">About the Gypsy</a> </span> <span class="buttons"><a href="eventFinder.php" >Find Events</a> </span> ... <span class="buttons"><a href="helpDG.php" >Help</a></span> <span class="buttons"><a href="http://www.thedancegypsy.com/" >Home</a></span> </p> </div> and the relevant css is: .buttons { background-color: #66FFFF; color: #FF6600; vertical-align: middle; text-align: center; padding: 3px; margin-right: 2px; font: bolder smaller medium Verdana, Arial, Helvetica, sans-serif; border: #3399FF; border-style: solid; border-width: 2px; white-space: nowrap; } url: www.thedancegypsy.com/indexBeta.php thanx in advance for any help This is my HTML code: Code: <div id="ManagerFastMenu" style="padding:5px;margin:0px;border-width:1px;border-color:#2D3B72;border-style:solid;background-color:#FFF;"> <!-- Buuton --><a href="/Editor.asp" class="SiteB">Edit here</a><!-- Buuton --> <!-- Buuton --><a href="/index.asp" class="SiteB">Edit</a><!-- Buuton --> </div> This is my CSS code: Code:
.SiteB,
a.SiteB,
a.SiteB:visited
{
border-width:1px;
border-color:#cccccc;
border-style:solid;
background-color:#2D3B72;
display: inline;
padding-top:10px;
padding-right:10px;
padding-left:10px;
padding-bottom:10px;
font-family: arial;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
white-space: nowrap;
cursor:pointer;
text-decoration: none;
}
a.SiteB:hover,
a.SiteB:focus,
a.SiteB:active
{
border-color:#000000;
background-color:#6280F6;
text-decoration: none;
}
Somehow Firefox don't recognize this too: Code: padding-right:10px; padding-left:10px; Why? Hi all! I am a bit of a newb to CSS, and could certainly use some help on this slight problem that I can't seem to figure out. Here is the link. And the code is at the bottom as well. If you look closely you will see that in the main page content, the text to the right of the quote is just a little bit further right than text below the quote. I must admit that I find a bit of CSS still quite confusing. I could certainly use any help that all of you could provide. Thanks in advance! Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 0px;
background: #006600;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium;
text-align: left;
color: #FFFFFF;
text-decoration: none;
}
div#head {
background: #FFFFFF;
width: 100%;
height: 100px;
}
div#menu {
text-align: right;
font-size: 12px;
font-weight: bold;
position: absolute;
top: 88px;
right: 50px;
color: #000000;
font-variant: small-caps;
}
div#title {
text-align: right;
font-size: x-large;
margin: 25px;
margin-right: 50px;
font-style: oblique;
}
div#quote {
text-align: center;
font-size: large;
width: 200px;
margin-top: 50px;
margin-left: 10px;
float: left;
}
div#content {
margin-left: 250px;
padding-left: 25px;
padding-right: 25px;
border-left: 1px solid #FFFFFF;
}
</style>
</head>
<body>
<div id="head">
</div>
<div id="menu">
Link 1 | Link 2 | Link 3
</div>
<div id="title">
Welcome to CLA
</div>
<div id="quote">
"This is a quote from some guy who said something profound."<br />
- Leonardo da Vinci
</div>
<div id="content">
<p>Established at the University of California, Irvine in November of 2001, The da Vinci Research Center for Learning Through the Arts builds on the expertise and combined knowledge of faculty in the Arts disciplines, Education, Social Ecology and Medicine to study the nexus of relationships between arts education, aspects of cognitive and social development, civic engagement, and public policy information.</p>
<p>The center fosters interdisciplinary studies that involve appropriate faculty from several other parts of the campus as well as from other institutions.</p>
<p>For more information please contact us: </p>
<blockquote>
(949) 824-8942<br />
Wendy Lee, Assoc. Director<br />
Claire Trevor School of the Arts<br />
University of California<br />
Irvine, CA 92697-2775
</blockquote>
</div>
</body>
</html>
Firstly, excuse my title, I couldn't think of a better way to put it . Now to the problem. In my layout I have a floated object, and text that flows around it, I can pad the text away from this floated object by using margins on the floated object. But I have created a class for <p> that I want to be padded further, and if I add padding-left to p.quote (the class) it makes no difference because the padding is simply going behind the float... As rubbish as that explanation was, I expect someone will pick up on what I'm going on about. How can I have some text indented (padded) further away from the float than other ? Thanks in advance. Hi guys, Ive been playing with this little bit of CSS for a while now and its' definitely getting the better of me. I have been using the demo on www.w3schools.com to create a horizontal menu. That has worked fine. I thought I could use a similar principle to create a horizontal menu. The whole idea is to create a CSS template, and then go through putting the ASP, etc in. I want to have a "leftpanel" on my site which will contain the navigation menu (that I am trying to create) and later make space for featured listings/whatever. Anyway, this is what I have: Code:
ul.ver
{
width: 125px;
padding: 0px;
margin: 0px;
text-align: center;
border: 1px solid black;
list-style-type: none;
float: left;
}
a.ver
{
float: left;
width: 125px;
text-decoration:none;
color: black;
padding: 0.2em 0.6em;
border: 1px solid black;
background-color: #A2B5CD;
}
div.leftpanel
{
background-color: #CAE1FF;
width: 125px;
float: left;
margin: 0px;
padding: 0px;
}
And the HTML is: Code: <div class="leftpanel"> <ul class="ver"> <li><a class="ver" href="#">MenuA</a></li> <li><a class="ver" href="#">MenuB</a></li> </ul> </div> The problem that I have is that no matter what the width of the <a> tags are, and what the width of the "leftpanel" is, there is always 20-ish pixel width strip of the "leftpanel" showing through, even though they are the same width, with no padding, no margins, no nothing! If I play with the padding on the <a> it seems to have no effect! Thanks to anyone who can offer me some help! Porky. Hi, I'm having a problem with some padding showing up oin both IE and Firefox with list items on my navbar. Please see: http://81.17.252.110/~wallis1/new/ I want the nav items to come to the edges of the <ul> tag (want to make the white borders on the navigation items come to the edge) but there is this padding there for some unknown reason between the <ul> and the <li> items. Please can you help as I'm tearing my hair out now, Thanks in advance, http://www.mortivica.com/moonrakers - the nav menu displays differently in IE and FF Here is the css: Code: #menu {
float: left;
width: 100%;
text-align: center;
margin: 0px auto;
padding: 0px;
display: inline;
}
ul {
text-align: center;
margin: 0 auto;
padding: 0;
display: inline;
}
li {
float: left;
padding: 10px;
margin: 0 auto;
border: 1px solid black;
background: #333;
list-style-type: none;
display: inline;
width: 10.84%;
}
li a {
padding: 0;
width: 69.9px;
}
li:hover {
background: #000;
}
menu is a containing div. Whats wrong???? Thanks in advance. |
|||||||