CSS - Chrome Rendering Text Over Aligned Images?

How to get a text aligned vertically in a css button?

Sounds weird, but you know us designers are always looking for fresh ways to present content.

I've not actually managed to make this work, even though it seems ridiculously simple; in effect it would just be full justification except any orphaned lines would be right-justified, not left.

Any ideas?

Is there any way to make some text vertically aligned inside a DIV? Just like you would do inside a cell?

Code:

<table><td valign="middle" height="100">This text is vertically aligned</td></table>

Apparently, the vertically-align CSS property only works if it is relative to other DIVs. What I want is some vertically aligned text inside a DIV.

Thanks for the help.

hi, i'm wondering whether anyone here knows something that i don't about this...

here's some code:

Code:

<div style="position:absolute; left:30px; top:90px; width:380px; height:80px; border: 3px double #000000; padding:10px; padding-top:5px; line-height:150%">
<table width="380" height="80" border=0 cellspacing=0 cellpadding=0>
<tr>
<td valign="middle">
<div align="center" style="width:380px;">
<span style="font-size:11px; text-align:left;">
aligned to the left.<BR>
but is it centered?<BR>
i think not.<BR>
</span>
</div>
</td>
</tr>
</table>
</div>

i'm able to achieve vertically centered text in the table cell, and i can center it or align it to the left, but so far in my experimenting i haven't found a way to have text that is aligned to the left, centered in the div.

i could always just add a bunch of padding-left on the div so that the text is pushed over and looks nicer although it is not centered, but i'm wondering whether there's a way to do it the way i originally planned to..

thanks very much for looking at this.

Hi,

I am making a site and it is important the text is always positioned over the background image in the same place. I have managed to do this. When I zoom out the text stays in the correct position however when I zoom in (as if I am looking on a smaller screen) the text re positions to the edge of the browser.

How can I keep the text in the same position on all monitors?

Here is what I have so far (I am very new to css):

#content {
text-align: left;
width: 1060px;
padding: 0px 30px 0px 30px;
margin-left: auto;
margin-right: auto;
}

Thanks
Cameron

Hi,

I wonder if you can help me,

In FF, this site has it's rows messed up.

If you scroll down towards the bottom the colours become out-of-sync with the text.

Can anyone help? (It works fine in IE and Opera)

Thanks

CSS Code (scroll down): http://jigsaw.w3.org/css-validator/...&usermedium=all

Thanks again

I'm trying to resize links on hover but doing so they change their vertical alignment during hover. Is there a way to prevent this ? Basically I just want the text to be bottom aligned and stay that way on hover. "text-align: top" works, but thats not what I want.

simple example:

CSS:
Code:

a:link, a:visited, a:active {
    font-size: 1em;
}
a:hover {
    font-size: 1.5em;
}

HTML:
Code:

<div>
    <a href="#">Text</a>
</div>

First of all I just updated my Dreamweaver from 2004 MX to CS4. I have not used CSS before.

I now want to update my sites to XHTML 1.0 Transitional and thought I would start using CSS.

I am having trouble with the text losing or changing color and size once it gets posted. It looks fine in browser preview.

So first some general questions. What is the difference between assigning properties to heading or class? Do I or should I use both the heading and class on a bit of text? Do I attach the style sheet to the template or to just the pages? All my pages are made from one template.

I have several books, that tell how to create style sheets, but not what to do with this problem!


Thanks, Jill

I have run into a problem in 2 of my pages in IE they Render fine in Firefox but in IE you cannot see the top part of the text and in some you don't incounter this problem. but when you refresh page the Title and author and the top text will not show in IE just disapper and it will show up when you Scroll or Highlight the text. I been trying to figure out this problem for quite sometime now.


The First Page
Second Page

Code:

 .top_article_pic {
  float:left;
  margin: 0 9px 0 0;
 }

 
 div#articles_bg {
   width:850px;
   background:#2A475F;
   padding:24px;
   }

 div#articles_page  {

   background:#FFF;
   border:1px solid #000;
   padding:12px;
   }
 div#articles_page2  {
   height:800px;
   background:#FFF;
   border:1px solid #000;
   padding:12px;
   }
   
 span.h1 {
   font-family:Arial,Verdana,Sans-serif;
   font-size:2em;
   color:#2A475F;

   font-weight:bold;
   }
   
  span.author {
   font-family:Arial,Verdana,Sans-serif;
   font-size:.9em;
   font-style:italic;
   color:#2A475F;

	
	}
 div#articles_page p.main_article {
   margin:18px 0 0 0;
   font-family:Arial,Verdana,Sans-serif;
   font-size:.8em;
   color:#000;

	}
	
 div#articles_page p.main_article_p{
   width:500px;
   margin:18px 17px 0 0;
   font-family:Arial,Verdana,Sans-serif;
   font-size:.8em;
   color:#000;
   float:left;
   background:#FFF;

	}

	
 img.right_thumb {
   border:1px solid;
 }
 
 p.click_enlarge {
   font:.8em Arial,Verdana,Sans-serif;
   color:#2A475F;
 }
 div#articles_page p.main_article_p2{
   margin:12px 0 0 0;
   font-family:Arial,Verdana,Sans-serif;
   font-size:.8em;
   color:#000;
   background:#FFF;

	}
	
	
 img.right_float {
   float:right;
   margin:0 0 0 15px;
   border:1px solid #000;
 }
 
 p#left_article {
   margin:10px 0 0 0;
   color:#000;
   font:.8em Arial,Verdana,Sans-serif;
 }

 p.article2 {
   margin:9px 0 0 0;
   text-align:justify;
   font:.8 Arial,Verdana,Sans-serif;
   width:530px;
   font:.8em Arial,Verdana,Sans-serif;

 }
 
 div.right_pic {
   width:161px;
   padding:10px;
   font:.8em Arial,Verdana,Sans-serif;
   color:#2A475F;
   margin:0 10px 0 0;
   float:left;
   background:#ccc;
   border:1px solid #000;
 }

Thanks in Advance

Note: as a new user it would not let me use a link(url)

Problem:when viewing in IE8 - the text looks grainy

notes:
Using this page as an example:
fineprintnotes.com/bergincapital1210/about-us-bergin-co-difference

-text looks smooth and easy to the eye when viewing in Firefox and Chrome
-text looks smooth when using the "compatibility view" feature in IE8 - but want that look as a default for visitors
-for example - when visiting other website using IE8 such as:

savantcapital.com
The text renders- when viewing in IE8- like Firefox and Chrome or in other words smooth and not grainy

-i have the same font face as that site and not sure what a fix could be
- read up on what possible fixes I could find on the internet - such as "emulate IE 7" tag

for example on this page: url blocked -- Welcome to Internet Explorer 8 Readiness Toolkit


Questions
- has anybody had this issue?
- i don't notice the savantcapital.com website defaulting to Ie7 (using emulate ie 7 tag - how does their text look cleaner than my website?
same goes for morganstanley.com (as another example)
- i find it hard to degrade the wesbite to fix the text issue- i am not sure if thats how to put it- but would like it to use a more DOM compliant browser like ie8 if it has option in stead of reverting to IE7 view. Any thought? or fixes?

Thanks in advance.

one other note: I tried to do screen shots but it wasn't communicating the issue - the images altered the drasticness of the difference - i feel - right now i have the website not emulating ie7

Jamie

Hi All,

I'm having problems getting a couple of CSS rules to render on my page. First, here's the page:

http://www.righteousguitar.com/

Here are the rules that aren't rendering properly (or likely at all):

Code:

#Heading {
	text-align: center;
}
#Heading h3 {
	margin-top: 14px;
	margin-bottom: -5px;
}

This rule should move the logo 5px from the left and top of the header. I've tried increasing the margins to as much as 50px, and it has no effect. (The "logo behind the logo" is part of the header image, which I'll remove once this is resolved.)

Code:

#Heading {
	text-align: center;
}
#Heading h3 {
	margin-top: 14px;
	margin-bottom: -5px;
}

These rules should center the h1/h3 heading and change the top-margin of h3 from 34px to 14px.

I should say that, for the most part, this is not my code - I received a free template with my hosting package. I did, however, create the rules in question. I'd prefer not to make wholesale changes to the code unless absolutely necessary. I've reviewed my notes on inheritance and specificity, but I can't find the problem, so I'm hopeful someone here can.

Thanks in advance for any ideas or suggestions.

Sam

Hello,

I was wondering if anyone could shed some light on this problem I'm having with my navigation bar. I've Googled and tried every [seemingly] logical combination, but can't get it to work -- and it's driving me nuts!

Basically, I have a div containing an unordered list and an image. The image is a non-semantic hack I've had to put in for the design, without making it massively complicated... Anyway, the problem is with the ul, which contains lis that are just images (tabs). Like so:

Code:

<div id="tabs">
  <ul>
    <li><a href="..."><img src="..."></a></li>
    <li><a href="..."><img src="..."></a></li>
    [etc.]
  </ul>
  <img src="filler.png">
</div>

Each image is a different width; and the above is simplified for clarity... Anyway, this works perfectly in Firefox, Opera and even IE. However, in Safari and Chrome, the lis have a few extra, blank pixels of padding on the right edge of the image; whereas I want all the images to butt-up against each other.

My CSS is as follows:

Code:

#tabs {
  word-spacing: -4px; 
}

#tabs ul {
  display: inline; list-style: none;
  margin: 0px; padding: 0px;
}

#tabs li {
  display: inline;
}

The word-spacing for the div removes the spacing you automatically get in Firefox/Opera/IE -- I found -4px was enough to remove the gap entirely -- but in Safari/Chrome, a gap remains. If you make the value even smaller (e.g. -5px, -60px, etc.) it makes no difference in any browser; if you make it bigger, then the gaps widen in all browsers. However, WebKit browsers always have that extra padding on the right edge.

Any ideas on how to get rid of this?... I've tried "display: inline-block", "-webkit-border-horizontal-spacing" with various values, "white-space: nowrap"; even altering the HTML so that the images and lis have explicitly defined widths. Nothing works!

I do relatively simple websites and I did a simple one for a client of mine and have a problem selecting text in a column. The website is,

jeffwalterssafety.com

I can't seem to even touch the text. It acts like an "image" when looking at it in Firefox/Chrome but I can select it in IE 7.

Be gentle in the site's criticism...

Also let me know if it's necessary to have my CSS file here.

Thanks

I'm trying to position some things inside a DIV. Here's the basic layout:



What I did was put them in DIVs position them within the "parent" DIV relative to the upper left. Doesn't seem to work, so I'm doing something wrong.

Image One is easy, but the text and Image Two I just don't seem to grasping.

I've looked at the Floatutorial, I'm not grasping it, or the answer isn't there.

Should the text block and Image Two be within a separate DIV?

I'm trying to create a layout (internal to a page - in the content area) that looks like this

image image image image
text text text text

without using tables. This works great using floats but I want the entire block of images/ text centered in the container.

Currently this is just left justified which looks really bad

my code
Code:

<div align="center">
	To view the site plan, please click the image below.
</div>
<br>
<div align="center">
	<div class="lfloat">
		<a href="#self#?fuseaction=ecbs.showsiteplan&selshow=#attributes.selshow#&sp=1">
		<img src="siteplan/images/ecbs_01.gif" alt="Pier 66"></a><br>
		Bahia Mar
	</div>	
	<div class="lfloat">
		<a href="#self#?fuseaction=ecbs.showsiteplan&selshow=#attributes.selshow#&sp=2">
		<img src="siteplan/images/ecbs_01.gif"></a><br>
		Pier 66
	</div>		
	<div class="lfloat">	
		<a href="#self#?fuseaction=ecbs.showsiteplan&selshow=#attributes.selshow#&sp=3">
		<img src="siteplan/images/ecbs_01.gif"></a><br>
		Convention Center
	</div>		
	<div class="lfloat">	
		<a href="#self#?fuseaction=ecbs.showsiteplan&selshow=#attributes.selshow#&sp=4">
		<img src="siteplan/images/ecbs_01.gif"></a><br>
		Sailfish Pavilion
	</div>		
</div>

lfloat just specifies float:left