|
CSS - Problems With Gaps Between Lines Of Text
Argh! I want to have a little icon as a link with a caption under it.
It should be a no brainer. Like this: PHP Code: <a class="a" style="line-height: normal;" href="http://www.oregonetail.com/etail.html"><img src="/images/heart_innovation_icon.jpg" height="60" width="39" alt="heart innovation poster" border="0" />E-tail Neighbors</a> Here's the thing, there's a GAP between the graphic and the caption, and if the caption has to go an extra line because of the width constraint of the <div> that this is in, there's a huge GAP between the lines. I want the caption BUTT UP against the bottom of the picture and if the caption wraps, I want the second line of it BUTT UP against the first one NO GAP. I've been twiddling around with line-height but NOTHING I DO alters this in the slightest. BTW the "a" class is nothing but font-size: .75em my next test is to take that out and see if that helps, but I don't have a clue what is the root cause of this. This should be so ffing basic!!! Removing the "a" class didn't work. Here is a little context: Code: <div> <div style="width:88px; float:left" > <a href="https://estore.villageprofile.com/itemdetail.cfm?nItemid=546&viewby=exhibit&nexhibitID=2&subview=37" target="_blank"> <img src="/images/corv_ebook_cover.jpg" style="width:88px; height:100px" border="0" /> <span class="a" style='line-height: .5;'>FREE Town Guide</span></a> </div> <div style="float: left; width:50px;"> <a href="http://www.corvallisiba.org"><img src="/images/ciba_tiny.jpg" height="33"; width="50" alt="ciba logo" border="0" /> <span style='line-height: .5;'>CIBA Member</span></a> </div> On one of them I took the span out in case *THAT* was causing it and applied the styles to the "<a" tagged item as in the first exmple. NOTHING changed. PLEASE HELP! Similar Tutorialshttp://64.232.240.200/new.html This site works well in Mozilla. There are spacing discrepancies between loads with Mozilla and latest Internet Explorer. The space under headings in the Main section differs between them, and there are gaps in the newsboxes where the background image runs uninterrupted on Mozilla. Internet Explorer Mac v5 does horrible things as can be seen in <a href="http://64.232.240.200/mac_ie5_screen.jpg">this screenshot</a>. (Colors have been changed slightly since this screenshot was taken, but you get the idea.) Any help is appreciated. Sorry I can't be more descriptive about my problems, but I am really not that great at CSS/PHP/coding in general. I barely passed my Matlab/C++ class freshman year of college, lol. Anyway...my friend and I just started a blog but neither of us know anything about CSS. I followed a tutorial for creating Wordpress Themes using PHP and CSS. I've been working on the blog (hosted locally) for a while now, and finally decided to FTP it to my host server to do the browser snaps on it, etc. thepennydreadful.com That's the URL and right now there is a gigantic white gap between the footer and the container....I thought if I adjusted the padding it might fix the problem because that's how I fixed it when there was a gigantic white gap between the header and the container...but yeah. I've heard from my friend that in his browser (latest vers of firefox) that the sidebar doesn't go to the side like it's supposed to either. I'm using the latest version of Google Chrome, if that matters. Any help or suggestions on how to fix the problem would be greatly appreciated. I've been following the W3 school's pages on CSS too, but I haven't had any formal instruction on CSS so most of what I am doing is pretty much just poking around in the dark. :'( PS: I did validate my CSS like it says to do in the sticky at the top of the forum page and it validates alright.... Code: /*
Theme Name: The Penny Dreadful
Theme URI: http://www.thepennydreadful.com
Description: The layout for the gothic and lolita blog "The Penny Dreadful."
Version: 1.0
Author: Kate Bartlett
Author URI: http://nozomiwhitewolf.livejournal.com/
*/
body{
margin-left: 0;
margin-right: 0;
margin-top: 0;
margin-bottom: 0;
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
text-align:left;
vertical-align: top;
/* background-color: #29001E; */
}
div#content{
padding:180px;
width: 400px;
float:left;
}
/*Header, Container, Footer*/
div#header{
background-image: url('Top.png');
background-repeat:no-repeat;
height: 519px;
}
div#container{
background-image: url('Middle.png');
background-repeat: repeat;
margin-right: 639px;
height: 476px;
text-align: left;
padding: 1px;
}
div#footer{
background-image: url('Bottom.png');
background-repeat:no-repeat;
clear:both;
float: left;
width: 1050px;
text-align: left;
padding: 160px;
height: 360px;
}
/*
End of file.
*/
Hi Folks, I really have spent days trying to fix this problem. http://test.fluid-rock.com/ I have some nested divs that use background images and colours to create the 3 column effect. In IE [of course] there's a problem. You can see it in the page above. White bands appearing on the right and flashing different heights on resize. I now have a border [red] around the wrapper div, because I've discovered that a border helps to tlessen the damage. Without it - the white rectangle/void stretches all the way accross blanking/truncating the text in the middle column too! It's completely weird. Before I post hundreds of lines of code I thought I'd let you just see the page, perhaps the problem looks familiar? Thanks so much, John I'd like for these to align nice and neat, but when the lines break, they don't line up. See submenus: http://test.firstinsurancefunding.net/first-advantage/why-first/ Thanks in advance! I have a few lines of text which have different formatting setups. But there seems to be an extra space between the two lines of text. Why is this? Here is the css for the text: Code:
h1{
color:#534741;
text-decoration : none;
font : 20px 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica, arial, sans-serif;
text-align:left;
font-weight: bold;
padding-left: 18px;
}
h2{
font-size: 16px;
color:#1133aa;
text-align:left;
padding-left: 0px;
padding-right: 20px;
}
h3{
font-size: 12px;
color:#534741;
text-align:left;
padding-left: 0px;
padding-right: 20px;
}
Here is the text itself: Code:
<div id="centerformbottom">
<h1>or call</h1>
<div id="centerformbottomleft">
<h2>Janine Todd</h2>
<h3>312.848.9388
<a href="mailto:janine@imaginehealthsolutions.com ">janine@imaginehealthsolutions.com </a></h3>
</div><!--centerformbottomleft-->
<div id="centerformbottomright">
<h2>Bob Brodell</h2>
<h3>312.659.4242
<a href="mailto:bob@imaginehealthsolutions.com">bob@imaginehealthsolutions.com</a></h3>
</div><!--centerformbottomright-->
</div><!--centerformbottom-->
Here's a link to the page itself: http://www.childevangelismncwi.org/ImageHealth/Contact.htm Thanks! I want to construct a page like this... Obviously, I could build a 'rigid' page in the old-fashioned way with tables, trs, and tds but I'd like to provide something a bit more flexible with divs that could survive a bit of strectching, changes in font size, etc. Can you see what I'm getting at? I'm not looking for a complete solution, just a few pointers as to whether it's doable/worthwhile and how one might approach it. I know vertical-align works great on one line of text, but I can't get this script to vertically (and horizontally) center two lines of text. What do I need to do change without changing the size of the div? Code: echo '<div style="float:left;width:171px;height:96px;text-align:center;display:table-cell;vertical-align:text-middle;background-color:yellow;">'; echo '<h1 >1/35 Scale House</h1>'; echo '</div>'; Normally when I want to vertically align some text to the middle of a div I use line-height: 40px; and vertical-align: middle; However that only seems to work on single lines of text because with multiple lines of text the line height of each line means there is a large gap between the text rather than centreing the whole lot vertically. How do I get around this? I thought something like the following would work but it doesn't. <div style="line-height: 60px; vertical-align: middle;"> <span style="line-height: normal;">line1<br />line 2</span></div> Hi Guys, I'm trying to align some text along an image. The problem is, I want two lines of text to the right of the image, aligned to the top. If I put a <BR> tag between the two lines, the second line gets placed below the image. Here's what I have so far. img.top {vertical-align:text-top;} <a href="http://company.com/graphics/thumb.jpg"> <img class="top" src="http://company.com/graphics/thumb.jpg"> </a> <a href="company.com">sample text</a> <a href="company.com">second line</a> Any ideas? I've tried like every switch for the vertical-align property... Hi, we have a site that is having some issues with text formatting, and I'm hoping someone can help vs. changing the template. the site is paydayleads(dot)com and as you can see, even text formatted in <p> tags are not coming up as new paragraphs, everything is grouped together, etc. I was able to format a list alright, but I am trying to figure out how to troubleshoot the regular paragraph problems. Any ideas? If Im not in the right place can anyone suggest where to go? Ok, so here is my page: http://a.parsons.edu/~sean/weargreen/home.html and here is the design I layed out in photoshop http://a.parsons.edu/~sean/weargreen/homeimg.gif In FireFox the text is placed a few pixels lower than the text in IE. Though I have fiddled around with the placement and lineheight and all that, I can't get them to look the same. Here are screenshots IE: http://a.parsons.edu/~sean/weargreen/iescreen.gif FF: http://a.parsons.edu/~sean/weargreen/ffscreen.gif Any advice or help would be greatly appreciated. Thanks! In Firefox, my text will align perfectly. However, IE will not show the text in the proper spot and I can't come up with a way to over come this. Heres my css document: /* CSS Document */ #header { margin: auto; background-image:url(images/header.jpg); width:800px; height:158px; left: auto; top: auto; right: auto; bottom: auto; background-position: center; } #headernav { font-family: "Times New Roman", Times, serif; font-size: 14px; font-style: normal; color: #4B60AF; font-weight: normal; word-spacing: 12px; margin-top: -42.5px; margin-right: auto; margin-bottom: auto; margin-left: auto; any suggestions? BTW the text is in headernav The new version of the website I work on is now structured using CSS to position divs, whereas the old site was done entirely using tables. The thing is, it's no longer possible to select the text properly now its inside div tags - many of the other divs get highlighted completely, and the target text gets highlighted in an unpredictable manner - whereas on the old site, with its table format, this was not a problem. Please help! Hi guys, I just wanted to say that I think devshed is a kick butt place for getting help with all sorts of CSS problems... always seems whenever I post that someone really helpful ends up helping me solve the problem in a way I hadn't thought of... So here's the issue: I need to put two elements into a div, one aligned on the left side and one aligned on the right Now what I'm looking at is the section where I have the Home text and the Quick News. So I've put the design into XHTML and CSS he But I can't seem to get the news line to move over properly. Any suggestions? I have used float:right but it just doesn't seem to work. I tried putting a div in and align=right but that pushes the element onto the next line which I don't want. Any ideas guys? There simply has got to be an easy way to align text within a div that I'm missing somehow. Thanks! I've got some text setup in a <div> of mine, and the lines of text are so long that they scroll off the side of the screen. I want these lines to wrap to a new line so they don't scroll off the screen. How do you make text in a <div> not be able to be more wide than like, x% of the screen? To view my problem go to my url he my site I am working on a site and I have a lot of the design worked out but I am running into a problem. The client wants to two columns. one in the center with a background image and a second off to the side as a sidebar. The second div is working as I want it to so far but the problem is placing the background image on the first div and getting the text to appear on top of it. Any help would be appreciated. Code: <html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}
#content {
position: absolute;
top:75;
left:180px;
z-index: 1;
width: 800px;
height: 600px;
background-image:url('WEROCK-NETWORK-BG2.png');
}
}
#sidebar {
position: absolute;
top:95;
left:1000px;
z-index: 1;
width: 175px;
height: 600px;
background-color: #FFFFFF
}
}
</style>
<!--[if IE 6]>
<style type="text/css">
html { overflow-y: hidden; }
body { overflow-y: auto; }
img#bg { position:absolute; z-index:-1; }
#content { position:static; }
</style>
<![endif]-->
<script language="JavaScript">
function maximizeWin() {
if (window.screen) {
var aw = screen.availWidth;
var ah = screen.availHeight;
window.moveTo(0, 0);
window.resizeTo(1024, 768);
}
}
</script>
<body onload="javascript:maximizeWin()">
<img src="WEROCK-NETWORK-BG.png" alt="background image" id="bg" />
<div id="content">
test
</div>
<div id="sidebar">Sidebar test</div>
</body>
</html>
Hi all, I noticed that when I give the text-align style as "justify", the words are unevenly spaced to justify the alignment. But it looks really weird if there are only two long words in a sentence and many small letter words in the next line. Can any1 suggest a way to align the text inside a <p> to be evenly spaced as well as justified. How to make the text to hyphenate (i.e split words with a '-' and display it in the next line). Is there a CSS property to accomplish this. I wud be grateful to recieve comments. Thanks in Advance. - John im sure this may be answered somewhere on this forum inside another post, but using search, i could not find anyone who had actually asked this specific question... i found a few posts back in 2002 that never got a responce... i'd hope we'd have an answer 3 years later... anyhow, my question is quite simple... i think.. i have a div that is 50px in height, and has some text inside it.. the text aligned center, and now i want it to vAlign center.. but the CSS doesnt seem to work... my problem is that the text in that field changes quite often, and having to constantly change margins in CSS would be a pain. anyhow, now for a snippit Code:
.advertboxtitle {
margin:10px 0px 0px 110px;
height:50px;
border:1px dashed #900;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#CCFFFF;
font-weight:bold;
text-align:center;
}
.advertboxtitlevalign {
vertical-align:middle;
}
Code: <div class="advertboxtitle"> <span class="advertboxtitlevalign">From X-Box to Xbox</span> </div> anyhow, reason why it is in a span is because i read that inline elements react to vertical-align:middle... but apparently not... anyhow, here is a link.. http://defunctgames.com/helpfix/middle.htm the text needs to be align verticaly in the dashed red box. thanks Hi I was wondering why there are aps at the end of navbar: http://www.wnv2.com/v9.php . Here's the css, view source for html CSS: Code: /*** CSS Document
(C) WNV2.com . Feel free to use this file; give me an email, I'd like to see who this code is benfiting
***/
body {
margin: 0;
padding: 0;
background: #65b240 url(bg.jpg) repeat-x;
font: 11px Verdana, Arial, Helvetica, sans-serif;
color:#385e26;
}
a, A:visited {
font-weight:bold;
}
a:hover{
color:#593;
}
/*------------Content CSS----------*/
.hometop{
background-image:url(home_300_bg.gif);
font-weight: bold;
text-align:center;
}
.home_sidetop{
background-image:url(home_150_bg.gif);
font-weight: bold;
text-align:center;
}
input, select, textarea {
font: 11px Verdana, Arial, Helvetica, sans-serif;
border: 1px solid #CCC;
}
/*---------- Divs ------------*/
#switchstyle {
text-align:left;
}
#switchstyle .lite, #switchstyle .lite a {
width: 17px;
height: 16px;
background-image: url(switch.gif);
}
#switchstyle .lite a:hover {
width: 17px;
height: 16px;
background-image: url(lite.gif);
}
#switchstyle .green, #switchstyle .green a {
width: 17px;
height: 16px;
background-image: url(switch.gif);
}
#switchstyle .green a:hover{
width: 17px;
height: 16px;
background-image: url(green.gif);
}
#wrapper {
margin:auto;
padding: 0px;
width: 600px;
}
#header {
margin: 0px;
padding: 0px;
width: 600px;
height: 85px;
background-image:url(top.jpg);
}
#navigation {
margin: 0 auto;
padding: 0px 50px;
width: 500px;
height: 25px;
text-align:center;
}
#navigation ul {
margin: 0px;
padding: 0px;
height:25px;
list-style-type: none;
background-color:#ddd;
}
#navigation li {
display: inline;
padding: 5px 7px;
}
#navigation li a {
color:#385E26;
font-weight:bold;
height: 25px;
text-decoration:none;
background-color:#ddd;
}
#navigation li a:hover {
color:#593;
font-weight:bold;
height: 25px;
text-decoration:underline;
}
#navigation .left_nav {
float: left;
width: 22px;
height: 25px;
background-image:url(nav_left.jpg);
}
#navigation .right_nav {
float: right;
width: 22px;
height: 25px;
background-image:url(nav_right.jpg);
}
#middle{
background-image:url(middle.jpg);
background-repeat: repeat-y;
width:600px;
}
#navigation .spacer {
width: 5px;
height: 5px;
display: block;
background-image:url(nav_spacer.gif);
}
#contentswrapper {
margin: 0px;
padding: 5px 55px;
text-align: left;
width: 490px;
}
#bottom {
height:90px;
width:600px;
background-image:url(bottom.jpg);
}
/*---------- Tutorials ------------*/
.b-tut-tlb {
border-top: 1px dotted #593;
border-left: 1px dotted #593;
}
.b-tut-trb {
border-right: 1px dotted #593;
border-top: 1px dotted #593;
text-align: left;
}
.row_one {
background-color: #DEDEDE;
}
.row_one a:hover {
background-color: #FFF;
}
.row_two {
background-color: #EEE;
}
.row_two a:hover {
background-color: #FFF;
}
|
|||||||