|
CSS - Odd Text Problems
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? Similar TutorialsIn 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 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! 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 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! 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! 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 I am having two problems with a theme I have for PHPBB3. One problem is the text that you type into textboxes when making a new post, updating your profile, or a few other spots is white on a very light grey background; therefore, hardly showing up. The second problem is that the page display a white line at the bottom of a few pages (but not others) and the line goes away if you resize the IE window smaller, but reappears again if you full screen it. I know the first problem has to exist in the stylesheet.css file; however, I am not sure where to make these changes as I am not familiar with PHPBB stylesheets. If anyone could help it would be greatly appreciated. Thanks! Forums: Click Here Stylesheet: Click Here Pictures of my problems: Text problem- Line Problem - I only have IE 6, so Im not sure if I have the same trouble in other versions of IE. The site looks great in FF 2 though! View: http://www.angelsar.org/development/funding.php - in FF then in IE6 and you cant miss what I'm talking about. Here is the CSS that came with the template I'm using: Code: body {
background: url(bg.png);
background-repeat: repeat-x;
background-attachment: fixed;
margin: 0 0 0 0 ;
}
div.top {
height: 50px;
background-color: blue;
border-bottom: 2px solid #eaeaea;
color: #fff;
}
div.top h1 {
letter-spacing: -2px;
font-size: 40px;
margin: -5px 0 5px 0;
padding-left: 10px;
}
div.top h1 a { text-decoration: none; color: white; }
div.body {
padding: 10px;
font-family: tahoma;
}
div.left h2, div.right h2 {
border-bottom: 1px dotted;
font-size: 16px;
padding: 10px;
margin-top: -0px;
}
div.right h5 {
margin-left: 10px;
margin-top: 0px;
}
div.left {
background-color: #fff;
padding: 5px;
float: left;
min-height: 400px;
width: 200px;
border-top: 1px solid #808080;
border-left: 1px solid #808080;
}
div.right {
background-color: #fff;
padding: 5px;
min-height: 400px;
margin-left: 220px;
border: 1px solid #fff;
border-top: 1px solid #808080;
border-left: 1px solid #808080;
}
div.footer {
clear: all;
margin-top: 15px;
border: 1px solid #fff;
font-size: 90%;
}
ul.menu {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
ul.menu li {
border-bottom: 1px solid white;
padding: 1px;
}
blockquote {
padding: 10px;
border-left: 1px dotted blue;
}
ul.menu li a {
padding: 5px;
display: block;
text-decoration: none;
border-bottom: 1px dotted;
border-left: 1px dotted;
padding-left: 15px;
font-size: 85%;
}
ul.menu li a:hover {
background-color: #eaeaea;
border-left: 10px solid blue;
padding-left: 6px;
}
p {
padding: 5px;
font-size: 90%;
}
img.rightBorder { float: right; border: 1px solid #808080; padding: 5px; margin: 5px;}
img.leftBorder { float: left; border: 1px solid #808080; padding: 5px; margin: 5px;}
img.border { border: 1px solid #808080; padding: 5px; margin: 5px; }
span.gray { color: #808080; }
span.gray a { color: #808080; text-decoration: none; }
The only thing that doesn't validate is clear: all; under div.footer but even when removing that, it doesn't solve my problem. Any help would be appreciated! Thanks! I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container. Anyone know why there is a shift, and what I can do about it? Style sheet code pasted below: Code: body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3;
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}
h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}
h2 {
font-size:2em;
}
h3 {
font-size:1.5em;
}
h4 {
font-size:1.25em;
}
a:link {
color:#8090AC;
text-decoration:none;
}
a:visited {
color:#B17F6C;
text-decoration:none;
}
a:hover {
color:#E9DF55;
text-decoration:underline;
}
a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}
#header {
height:200px;
width:760px;
margin:0;
padding:0;
}
#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
font-size: 12pt;
color: #e9df55;
background-color:transparent;
text-indent: 200pt;
vertical-align: text-bottom;
}
navigate{
color : #105BAC;
background-color : transparent;
height : 20px;
font-size: 100%;
border-top : 1px solid #999999;
}
#navigate ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 150px;
margin-right: 0px;
padding: 2px 0 0 0;
}
#navigate ul li {
display: inline;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 14px;
color: #FFFFFF;
left: 50px;
right: 50px;
}
#main {
width: 660px;
padding-right: 50px;
padding-left: 50px;
}
#footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #666666;
height: 100px;
width: 760px;
vertical-align: text-bottom;
text-align: center;
}
#SplashImage {
float: left;
}
.image-left {
clear: none;
margin-bottom: 10px;
float: left;
margin-right: 20px;
margin-left: 10px;
}
.image-right {
clear: none;
margin-bottom: 10px;
margin-left: 10px;
float: right;
}
I would like to pop up the text, that is, make it bigger when the user hovers on it. but the problem everytime the text gets bigger, the whole row moves and the surrounding texts gets displaced. any idea ? tutorial? let me know if i need to explain more. Good Morning All, Been having a slight problem with the visual in the screenshot below. The blue line is our H2, and the purple one is our H3, however, as you can see, the underline spans the entire width of the column, not just underneith the text, which is our requirement. ***As i am not allowed to upload a url as a new user, the underline is as follows. With the text centre aligned. text ----------------------------------------------------------- rather than text ------ and obviously by the css, the underline on the headers is a small image, repeated - x. Please see relevant css information. * (line 23) { margin-top: 0pt; margin-right: 0pt; margin-bottom: 0pt; margin-left: 0pt; padding-top: 0pt; padding-right: 0pt; padding-bottom: 0pt; padding-left: 0pt; } h2, h3, h4, h5, h6 (line 101) { font-size: 1.2em; font-weight: normal; padding-bottom: 4px; margin-top: 0.6em; margin-right: 0pt; margin-bottom: 0.8em; margin-left: 0pt; text-align: center; } .contentArea h2, #secondaryNavigation h2 (line 114) { background-color: transparent; background-image: url("../images/h2_gradient_bg.gif"); background-repeat: repeat-x; background-attachment: scroll; background-position: left bottom; color: #0066cc; } Many Thanks in advance. Marc. can someone help me with this? here is the page&css I have been working on... the page file the css file I might be silly to use a template that I did on illustrator (with all the banner, boxes and navbar read and just use that as my container background. then I made some transparent boxes for puting in text, images or form elements. Is that why I am not able to select any other those things on the site? this is the first time I try using css to make the whole webpage, so I would appreciate any guidance...thanks!! I know how to position regular text using the in-line style "text-align:right", but when I try to do that with a link I get nowhere. Simplified example: Code: <html> <body> <td><p style="text-align:right">Google</p></td> <td><a href="http://www.google.com" style="text-align:right">Google</a></td> <td><a style="text-align:right" href="http://www.google.com">Google</a></td> <td><span style="text-align:right"><a href="http://www.google.com">Google</a></span></td> <td style="text-align:right"><a href="http://www.google.com" style="text-align:right">Google</a></td> <span style="text-align:right"><td><a href="http://www.google.com" style="text-align:right">Google</a></td></span> </body> </html> The first body line works fine to move the text to the right, but the link in lines 2-5 of the body are stuck on the left. Any suggestions? (My actual code invokes a class from a css page in a particular <td> and I'm trying to force a link in that <td> to the right using an in-line style; while I can do that for regular text I haven't found the secret of doing that for a link.) i have almost perfected the text wrap for this page.... http://defunctgames.com/helpfix/relevent.php4 problem is, i put a margin-top:50px on the image, and i want the text above the image, to flow all the way to the left. thus fully wraping the text. I saw a website that was throwing text that was written and recalling it with a link into a textbox...are there any tuts or anyone help me out with this one thanx aim rpduece I have a div within a div, I set each to 790px wide and a border around the "container". My image is about 2px wider than the "container" width in IE. This is not the problem in firefox. If I shorten the width of the image by 2px, then it looks dumb in firfox. Any insight would be appreciated. Thanks. <body onload="load(); load2()" id="body1"> <table class="td1" cborder=0> <tr> <td class="td1"> <div class="container" id="container"> <div class="banner"> <img id="index1" src="images/index1.jpg"/> </div> ... div.container { position: relative; top: -3px; background-color: white; text-align: left; width: 790px; border-left: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black; } .banner { position: absolute; width: 100%; left:0px; } |
|||||||