|
CSS - Padding Causing A Problem
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; }
Similar TutorialsHi, Pop along to www.themapcentre.com , using Internet Explorer. You should see a site that's fairly tidily arranged. Now take a look at it in Opera or Firefox, and you'll see it all goes to heck in a handbasket. A classic case of IE-itis. I have basically used layers of containers for each part of the site. Can anyone suggest a fix that would make this look right in firefox etc as well as IE? The div CSS is posted below: Code: body {
background-color:white;
font-size:x-small;
font:Verdana;
vertical-align:middle;
}
#container{
margin-top:0%;
margin-left:15%;
width:700px;
height:550px;
background-color:#C7E8FD;
z-index:1;
position:absolute;
}
#bottomdetailbar{
width:610px;
height:10px;
z-index:2;
margin-top:446px;
padding:2px;
margin-left:6%;
}
#topbar{
width:700px;
height:56px;
background-color:#3300CC;
z-index:2;
}
#midbar{
width:700px;
height:10px;
background-color:#96D6FF;
z-index:3;
}
#textbar{
width:650px;
height:20px;
z-index:20;
margin:5px;
margin-left:25px;
}
#globe{
width:auto;
height:auto;
margin-top:-51px;
z-index:4;
}
#mapcentretitle{
padding-top:41px;
margin-left:70px;
width:auto;
height:auto;
z-index:5;
}
#imagecontainer{
margin:0px;
margin-right:-50px;
width:460px;
height:400px;
float:right;
z-index:6;
position:static;
margin-top:30px;
}
#imagebox{
width:100px;
height:100px;
margin:3px;
padding:0px;
z-index:7;
text-align:center;
vertical-align:middle;
float:left;
position:relative;
display:table-cell;
}
#leftcontainer{
width:280px;
height:300px;
margin:3px;
margin-top:25px;
z-index:8;
}
#lefttop{
width:260px;
height:80px;
margin:3px;
padding-top:15px;
padding-left:15px;
z-index:9;
float:right;
background-image:url(images/leftopbg.gif);
background-repeat:no-repeat;
}
#leftinfo
{
width:260px;
height:125px;
margin:3px;
z-index:21;
background-image:url(images/information.gif)
}
#leftmiddle{
width:260px;
height:80px;
margin:3px;
z-index:30;
}
#descriptiontext{
margin-top:-555px;
margin-left:390px;
width:300px;
height:100px;
z-index:10;
}
#dropdown{
width:260px;
height:80px;
margin:3px;
z-index:12;
background-image:url(images/dropdown.gif);
background-repeat:no-repeat;
margin-top:0px;
}
#menuwork{
width:260px;
height:80px;
z-index:13;
margin-left:-165px;
margin-top:-410px;
}
Hi, I'm having a strange problem in IE7 and IE8 with CSS and toggle functionality. I'm using some simple jquery script to show/hide a div when a user clicks on a button. However, there's a strange issue happening that in IE7 and 8 the expanded content overlaps the content below. It should push all the content below it down instead. I'm completely perplexed by this. It works fine in Firefox and Safari. Here is a sample page: http://easytrip.ie/client-services Any help would be much appreciated! So i just wrapped up some initial styling for a personal website i'm working on, http://www.sociospatial.com/ Looks fine in firefox. Has some minor issues in chrome/webkit, which I'll iron out later. Haven't dared to load it up in IE yet. In Opera, though, I'm having a problem that I don't know where to start. So without having to paste alot of code, I have a wrapper div and a footer div, just so that I can have the footer hug either the bottom of the viewport or the bottom of the page, whichever is lower. I also wanted some background elements to the page, but I wanted them to hug the bottom as well (load up the page in firefox and resize to viewport to see), so I ended up with something like this: Code: <div id="footer"> <span id="left-bg"></span> <span id="right-bg"></span> </div> and the styling for these is something like (I can post the actual/more if need be) Code:
div#footer {
position: relative;
height: 25px;
width: 100%;
}
span#left-bg {
position: absolute;
left: 0;
bottom: 0;
width: 400px;
height: 600px;
background: transparent url(some-url.png) no-repeat 0 0;
z-index: -1;
}
span#left-bg {
position: absolute;
right: 0;
bottom: 0;
width: 400px;
height: 600px;
background: transparent url(some-url.png) no-repeat -400px 0;
z-index: -1;
}
in firefox/webkit at least, these function as i want, so I have 2 spans that spill up through the top of the containing footer div, but still hides behind normal content. If my wrapper content is minimal, it appropriately hugs the bottom of the viewport and i don't have any vertical scrollbar. If I have a lot of content in the wrapper, I have a vertical scrollbar, but the footer and the spillout background elements are all waiting for me at the bottom of the page. in opera (9), the two spans hug the bottom of the (initial) viewport as I would hope, but I *do* have a vertical scrollbar (even when the content in the wrapper does not necessitate it), and scrolling down reveals that I have a *huge* amount of space that's just empty body background below the footer. This empty space seems vaguely correlated with the "height" values of the spans (the lower the height value, the smaller the empty black background space under the footer), and the vertical scrollbar goes away completely under one of these conditions: a) i add "overflow:hidden" to the div#footer styling (but of course this stops the span elements from spilling through the top) b) using the W3-dev opera tools, if I disable both spans c) after I disable both spans, I enable only one or the other (if I just disable one after both have been enabled, the vertical scrollbar stays, so I have to disable both first). i'm not quite sure what exactly is going on here, nor really what issue I'm trying to track down (I don't know what to enter for a google search, for example) - I'm kind of new at this. Anyone have any clues to contribute? I'll add more information if needed. 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. 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>
Im 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 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 } 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 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;
}
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 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>
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? 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 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 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 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. |
|||||||