|
CSS - Double Dotted Line
I have a dotted line on the right side of the left column (the blog) and a dotted line on the left side of right column (the menu).
I would like a double dotted line with white space in between, so that the lines at the bottom close at the same height. How can I do this? Do I have to make a double dotted line on the right side of the blog column? Or do I have to make a third column in the middle of my blog with dotted lines on left and right side? You can find my website here and my css here Similar TutorialsWhy does firefox render the dotted line so different than IE? I think IE does a much better job of rendering it, is there a way to get the same look in firefox? Hi all, Not Sure if this is an css issue but when you click on a menu item for example a hyperlink. How do you get rid of the dotted box when a item is clicked. Stephen Greetings, I have a class called "header" and I am trying to give it a touch of extra space between it and the next line. All of my headers are just a few words and thus on one line. I tried placing "line-height: 1.5em" in my "header" class and it shows up correctly in Dreamweaver but not in IE. My thought is, because it is only a single line, that class value does not kick in because there is no second line for that class. Is there a way to conrol this in CSS or am I going to have to resort to using a....gulp.....spacer? Thanks in advance! Greetings, I am relatively new to CSS and am using background image bullets. Problem is, in the case of a two line link, the bullet aligns in between the two lines and I need it to align to the top line. Below is the CSS, and attached is a screenshot of the link to better illustrate my predicament. Thanks for any help! li { list-style-type: none; background: url(../images/bullet.gif) no-repeat left; padding: 0 0 0 10px; } I've got two lines of text. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below? Thanks! Hi, I am trying to make my page have a double background - one picture should be repeated on X axis and one big shouldn't be repeated. My CSS file looks like this: css Code: Original - css Code html, body { min-height: 100%; height: auto; margin: 0px; padding: 0px; } body{ background-image:url(/background.jpg); background-repeat: repeat-x; background-position: center bottom; } html { background-image: url(/Pic.jpg); background-repeat: no-repeat; background-position: center bottom; }
The background(background.jpg) is displayed correctly - it's aligned to the center bottom, but the picture (Pic.jpg) is aligned to the top left corner and has height and width of the page's content. How can I fix this behavior? If I spell a pseudoelement with a double colon ( :: ), example: ::first-letter (instead of :first-letter ), Internet Explorer 7 ignores the selector. Is this a bug, or is this the way CSS is supposed to work? Hi! I am trying to insert a nice footer menu into a CSS layout. If I set overflow to auto, I get double vertical scrollbars and a horizontal scrollbar I don't want. If I set it to hidden, I can't scroll to see content. If anyone would help me out of this scrolly mess (probably not complicated, but after a day's battling, I can't figure it out) I'd be very grateful. Just noticed that if I do allow scrolling, the footer menu doesn't scroll with the user. D'oh. Any ideas on that as well?? Code: *{border:0px solid #eee;margin:0;padding:0;list-style:none}
html,body,#bg,#bg table,#bg td,#cont{width:100%;height:100%;overflow:auto}
body{font-family:Arial,Helvetica,sans-serif;font-size:10px;cursor:default;color:#000}
h1,h2,{font-family:"Century Gothic","Lucida Grande",Arial,sans-serif;font-size:40px}
a{text-decoration:none;color:#000;outline:0}
#menu{position:absolute;bottom:20px;left:141px;z-index:80;width:100%;line-height:12px;}
#menu div{height:66px;background:#808000;filter:alpha(opacity=60);padding:7px 0 0 7px;}
h1 {position:relative;left:-141px;margin-bottom:-73px;width:140px;opacity:0.99}
h1 a{padding:51px 10px 10px 0;color:white;background:#808000 url(go.gif) 0 -30px repeat-x;font-size:11px;text-align:right;display:block}
h1 a:hover{background:#808000 url(go.gif) 0 43px repeat-x;;color:red}
li.grass {height:12px;padding:0 5px;font-weight:bold;color:#999;display:block}
li.grass a {height:12px;padding:0 5px;font-weight:bold;color:white;display:block}
li.grass a:hover {height:12px;padding:0 5px;font-weight:bold;color:red;display:block}
#atlogoL {position:absolute;top:3px;left:10px;z-index:100}
#atlogo {position:absolute;top:3px;right:10px;z-index:100}
#lena {position:absolute;top:10%;right:20%}
#lena2 {position:absolute;top:2%;left:38%; z-index:100}
* {
margin: 0;
padding: 0;
}
body {
font-size: 62.5%;
background: url(images/stripe.png) repeat;
}
p {
font: 1.2em/1.8em Tahoma, sans-serif;
margin-bottom: 10px;
}
h2 {
font: 1.8em Tahoma, sans-serif;
color: green;
margin-bottom: 10px;
}
ul {
margin-left: 25px;
}
img {
border: none;
}
#page-wrap {
background: white;
min-width: 780px;
max-width: 1260px;
margin: 10px auto;
}
#page-wrap #inside {
margin: 10px 10px 0px 10px;
padding-top: 10px;
padding-bottom: 10px;
}
#main-content {
background: url(images/left-sidebar.gif) repeat-y white;
padding-left: 230px;
padding-top: 20px;
}
#header {
background: #267f23;
text-align: center;
}
#left-sidebar {
width: 150px;
float: left;
padding-left: 15px;
padding-top: 20px;
}
#footer {
background: #267f23;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
color: white;
}
Code: <!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Perfect Fluid Width Layout</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" media="screen" type="text/css" href="slimmed.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style-ie.css" />
<![endif]-->
</head>
<body>
<div id="page-wrap">
<div id="inside">
<div id="header">
<a href="http://css-tricks.com"><img src="images/perfectfluidwidthheader.gif" alt="header" /></a>
</div>
<div id="left-sidebar">
<p>Ii </p>
</div>
<div id="main-content">
<h2>Why is this layout "perfect"?</h2>
<ul>
<li>Works in all major browsers</li>
</ul>
<br /><br />
<p>
Litterarum
</p>
<p>
Hendrerit
</p>
<p>
In
</p>
<p>
Ut
</p>
<p>
Videntur
</p>
</div>
<div style="clear: both;"></div>
<div id="footer">
<p>Footer stuff.</p>
</div>
</div>
<div style="clear: both;"></div>
</div>
<div id="menu">
<h1><a href="index.html">BOB</a></h1>
<div>
<ul>
<li class="grass"><a href="bob.html">BOB</a></li>
<li class="grass"><a href="bob.html">BOB</a></li>
<li class="grass"><a href="bob.html">BOB</a></li>
<li class="grass"><a href="bob.html">BOB</a></li>
<li class="grass"><a href="bob.html">BOB</a></li>
</ul>
</div>
</body>
</html>
Hello. I'm trying to create a link that spans the entire page horizontally with two different styles of text, each justified around a center margin (the text on the left being right justified, and the text on the right being left justified). I know I could set up two div's and justify the text accordingly, but I think that would separate the links when they need to remain one. Here is what I'm trying to accomplish: (I'm sorry, I'm trying to include a URL to an image, but it keeps blocking my link. No image.) So far I've got the link set up with the styles and hovers working exactly how I want, but the justification is not there. Any ideas? Hiya, So what I'm trying to do is have a base image used as a background that sits on the left side, and then another image to be used to tile across the rest of the page from where the first one left off. I'm not really sure how/if you can easily do something like that, and I can't seem to find anything when I'm searching. And when its all said and done, text would still go over both images as if it was one image. Thanks, -Sky I have painted myself into a corner, and it's time to paint myself out...Hopefully with help from someone here! For the images on my website, I have added a two color border around every image (in Photoshop)...A 1-pixel green border (#6e888f) on the outside of the image, and then a 1 pixel white border just inside that. See example he mableyhandler dot com As I add more and more images to the site, it is getting harder to keep up with adding the border in Photoshop every time. Is there a (semi-easy) way to do this in HTML? OR maybe in CSS? The challenge is that it needs to be a double border...And, it needs to be a permanent design element (the image is clickable, but the border colors should not change on rollover). Thanks very much Due to letter-spacing double break won't work in IE. And triple break works as it is double break. How to solve this problem? I have several rows of images with centered text under them. I wanted to do this without tables, simply because the way the rest of the page is laid out it'd be easier for me to position the images correctly and line everything up right. However, in IE when I test this the last column produces a double word of the last word in the centered text. It's kind of hard to explain, so I'm including my code. I did have this happen before and couldn't figure it out so I just used tables, but I'm so dead-set on getting away from tables that I figured I'd try again. Here's the code: Code: <!-- Start row one --> <div class="sscontent"> <!-- scenic studio column one --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> <!-- scenic studio column two --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> <!-- scenic studio column one --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> <!-- scenic studio column four --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> </div> <!-- start row two - continue row structure throughout all scenes --> <div class="sscontent"> <!-- scenic studio column one --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> <!-- scenic studio column two --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> <!-- scenic studio column one --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> <!-- scenic studio column four --> <div class="sscol"> <img src="images/ss_temp.jpg" width="152" height="103" /><br /> Scenic name </div> </div> and the style sheet declarations: Code:
.sscontent {
float: left;
width: 688px;
margin: 30px auto 0 36px;
padding: 0 0;
text-align: left;
display: inline;
}
.sscol {
float: left;
width: 152px;
margin: 0 20px 0 0;
padding: 0 0;
text-align: center;
vertical-align: top;
}
Now, I know that someone may bring up that the float is a block element and I can't display it inline, but it's the only hack i knew to get it to display in a straight line and still line up with the rest of the page. I'm more than open to suggestions here! -B Have two search boxes on the Advanced Search page of my Drupal site. The first is well-behaved and sits up in the right corner. I have replacement images for the submit buttons on the search boxes of both. On the first one, the html generated text is good and gone. On the second one, it's on top of the image. Somehow I'm not addressing the second search button correctly to have the 'text-indent: -9999px;' apply. Here's the misbehaving html in question: Code:
<!--[if IE]><div class="IEroot"><![endif]-->
<div class="container-inline">
<div class="form-item">
<input type="text" maxlength="255" name="keys" id="edit-keys" size="40" value="" class="form-text" />
</div>
<input type="submit" name="op" id="edit-submit" value="Search" class="form-submit" />
</div>
<!--[if IE]></div><![endif]-->
Here's the CSS I'm trying to address it with: Code:
.IEroot .container-inline .form-item input.form-submit {
width: 73px;
text-indent: -9999px;
}
I'd be grateful for any help. I am really stuck on this, can someone guide me to a tutorial or a working double row menu bar that works for both IE and Firefox. I have made several attempts on Spry and CSS but to no avail and no-one has been able to rectify it. Theres always something not going right on both browsers with the double row drop down menu bars I have attempted. The double row drop down menu bar looks like this: [menu1][menu2][menu3] [menu4][menu5][menu6] ............................[menu6a] ............................[menu6b] Hello guys, I have beginner CSS experience. I am using a free wordpress theme. I have begun to modify the theme and have run into a problem. I have checked all over the web for resources to resolve this issue to no avail. I have used the CSS Validator and received some errors nothing that affects this. ISSUE: When clicking "Read More" the image appears twice, once as the limited size and once as the full size. I would like only the first image to appear not the full size one too. SITE: havenhart[dot] com Any help would be super. Hey there, webbsdomain.com/Max I am working on a landing page for a client and I am a bit stuck. All XHTML and CSS validates, no issues there.... The design looks and works great in ALL browsers other than IE6. The issue is with the 3 colored divisions, secondLeft, secondMiddle, and secondRight. In IE6 there is a HUGE amount of white space left between the div's with no reason that I can find. I researched the issue online and found similar issues: IE6 3px float bug and IE6 double margin bug Neither of which seem to be the issue, and the fixes they describe do not work. I am completely at a loss on this one, and any guidance anyone can offer would be VERY useful! Thanks in advance, Brian I'm a little puzzled by this weird display bug by IE7, this bug doesn't occur in IE6. It had to do with the DIV's CSS's border-style. If you set it to double then you notice some random bugs with it. Some of the time, the border is displayed without a problem. Some of the time, it is displayed with some gaps in the line as if it is not being drawn upon. Some of the other time, it is not displayed at all. I noticed if I switch from one tab to another then back, the border appeared as if nothing had happened. I also noticed that if I open the view source that overlapp the web browser then closed it, the border appeared as if nothing had happened. How do you fix that problem? Thanks... Hi all Take a look at this in Firefox and then in IE7: http://www.josh.ch/files/temp/ie7_margin_bug/formulare.html The text input and the textarea fields have a strange margin on the left in IE7 that shouldn't be there. It seems to be "inherited" by the outher paragraph, just change the value in css/general.css on line 29 to see it happen. FF and IE6 behave well, IE7 doesn't. Interestingly, the select field (and all the other fields like radio buttons and checkboxes) don't have this problem. I did a search and found this link: http://www.positioniseverything.net/explorer/floatIndent.html Seems to be something like that, but the display:inline fix didn't help. the only way I see is a minus margin for the text input and textarea fields for IE7 only, but maybe there's a cleaner way? Thanks a lot for help :-) Josh |
|||||||