Solved

having a problem with <div> tags and z-index with over laying text.

Posted on 2008-10-15
3
240 Views
Last Modified: 2012-05-05
hello,
i have created a banner with <div> tags and z-index with overlying text layer.  it shows up correct in firefox but in ie the text breaks lines after each word. does anyone see an issue with my code?
thanks
<!--BACKGROUND COLOR-->
<div style="width:369px; height:150px; z-index:1; position:absolute;"><a href="/catalog/theme.jsp?themeId=381&"><img src="10-15-08_christmas_store_feature_2.jpg" alt=" Shop 2008 Collectibles" width="369" height="150" border="0"></a></div>
<!--BACKGROUND COLOR-->
 
<!--COPY-->
<div style="width:199px; height:95px; padding-left:20px; padding-right:150px; padding-top:55px; z-index:2; font:Arial, Helvetica, sans-serif; font-size:14px; color:#FFFFFF; position:absolute;">
shop 2008 collectible items
</div>
<!--COPY-->

Open in new window

0
Comment
Question by:nooch44
3 Comments
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22725942
try using in CSS -- display:inline;    or display:inline-block;   to style the text giving problems.
0
 
LVL 4

Accepted Solution

by:
MattKenefick earned 500 total points
ID: 22731770
in IE.. padding subtracts from the total width of an object as opposed to adding to it.

So when you have and object that is about 200px wide.. and you have 20px padding on left, and 150px padding on right... That only leaves 30px of space for words.. Which is why your words are breaking.
0
 

Author Closing Comment

by:nooch44
ID: 31506489
took the padding on the righ away and it did the trick...thanks
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question