CSS - Positioning And Text Spacing

My site is displaying properly and in good way to the bullet that i've used in menu in FF. But in IE 7 bullet and text is too close which make menu un attractive. How can i fix this? any suggestion. if you want you can see nepalmedia . com . np

thanks.

Hello, this is my first attempt at a website and first attempt at using CSS as well.

With much reading and the help of an online CSS layout creator I've been able to get pretty far, but have been having many roadblocks recently.


For instance, the second heading in my layout is not displaying correctly in IE, but looks fine in FireFox. Please take a look at

http://www.onlinecasinoboss.com/new_page_1.htm

The second heading should lay directly underneath heading number 1, with a 2px margin in between header 2 and the main page layout.

Also the text in the right, left and center columns starts as if it had a 12px or greater top margin. This problem exists in BOTH IE and FF.

Please help, and thanks for anyone that takes the time to help a newbie web designer out.

Is there a way to decrease a default spacing between bullet and text in <ul>?

Trying to follow "the best practices" I wanted to convert my menu from bunch of <a></a><br> to unordered list. I already display arrows icon next to menu items so I though it would save me some typing on <img>. But there is one problem: I can't decrease the space between bullet and text. There is bullet, around one em of empty space and then text. It breaks my layout, making menu items wrap to another line, and also wastes some space. I tried to play with margins and padding, but bullets still stay at the same place. Also negative margin and padding doesn't seem to work. If I use a background image instead of bullet, I can adjust the spacing but then the bullet position doesn't seem consistent and get cramped on text in longer lines.

Is it possible to adjust the line spacing in text using CSS because pressing return in text, the spacing is either too big or too small. I want control of line spacing so that I can have text and paragraph control like I do with Word documents.
eg.
A
B
I want the distance from A to B to be either greater or smaller.

Can you also control the space between letters?
eg.
AB
I want the spacing between A to B further or closer.

Is this all possible on a HTML page without having to use images for text or using tables to seperate each text line on a table to create different line spacing.

If I have a couple of paragraphs of text and would like to adjust the space when you press return to start a new paragraph, how would I add it to my styles code below. Right now, a hard and soft return is too big and I would like the spacing to be about half the font size of the text.

How would I add it to my stylesheet code in this example: Code:

.bodytext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	text-decoration: none;
	text-align:right;
	font-weight: none;
	background-color: #ffffff;
        line-height:1.5;
        letter-spacing:-0.02em;
}

Hi,

I am having a problem with positioning of text within a div. The CSS for my div is:

#menuItem {
background-image: url('../../images/menu_bg_off.jpg');
width: 146px;
height: 28px;
font-family: Verdana, sans-serif;
font-size: 14px;
font-weight: bold;
background-repeat: no-repeat;
}


<div id="menuItem"><img src="images/spacer.gif" width="33" height="1" /><a href="">Home</a></div>

The problem lies in getting the text to appear in the middle of the div. I've tried using padding-top: to nudge it down a bit, but that extends the height of the div.. which I don't want to happen. I have a bunch of these lined up vertically (forming a menu) and I don't want any space between them. margin-top: also adds this unwanted space.

As you can see I'm using a transparent spacer image to nudge the text horizontally to where I need it to appear, which works.

My question is.. how do I position the text vertically to where I want it to appear inside the div?

Hi

Basically i have positioned some text on my site in the place i need, and it looks fine while the browser is maximised. But when i resize, the text moves to accommodate. Is there anyway i can have the text in the right place, but not move when the browser is resized?

Thanks

this is the first time im making a CSS website. w3schools.com really is a big help, but i came upon a problem.

on the layout, on the upper left, i got my main menu. i positioned some text there with this code in <head>
Quote:
h1
{
position: relative;
top: 46px;
left: 135px;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
}

h2
{
position: absolute;
top: 63px;
left: 135px;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
}


( as u can see, i tried "relative" but it doesnt work )

and then typed the links of the menu like this:
Quote:
<h1><a href="index.html">Home</a></h1>
<h2><a href="aboutus.html">About Us</a></h2>
ect.


but when i rezise the browser or take a different resolution, then the text also moves along. the text doenst stay on its place on the menu.
for example, if i make the length of the browser smaller, then the text moves out of the menubox, to the right. i hope u understand this.

how can i make sure that the text will always stay on its place, on every browser size/resolution?

Hello all,
My second post . I have a div box with text in it.
It looks fine in ie, but the text drops when viewed in mozilla.
I have highlighted the border for clarity and want the text to remain directly underneath.
I have tried adding styles to mainsection, the div in question, and also the p text attribute, with no joy.
As with my last problem I am sure the solution is a simple style, but I can't find it.
Any help would be much appreciated. thanks Solar.

html page: http://darkspeed.atspace.com/Textest.htm

CSS link: http://darkspeed.atspace.com/txtstyle.css

thanks again.

I'm pretty new to CSS so bear with me if this is a silly question.

I want to go totally CSS and 0 tables. 1 problem that I've been having with my site is that I have several forms for data entry. These are of course done in 2 column tables, label in the 1st column, text box in the right.

The problem I'm having is that I cannot get the text boxes to line up properly using CSS. I am trying a test page simulating a login page. But since the words Username and Password are different lengths, the left edges of the text boxes don't line up evenly.

What is the best technique to get CSS to display 2 columns like a 2 column table where the first 'column' contains a text label and the 2nd column has the input boxes aligned nice and neat?

Hi Guys,

Basically, I have Text in a content box, all fine and dandy, this content box has a fixed width and an expanding height depending on supplied content.

I now need 2 further divs, one of which floats to the right, and positioned at the top of this content div, the other also floats right but needs to be alligned bottom.

Ive tried absolutes with content being relative but although this does solve the positioning problem, obviously the content text will not wrap around the divs.

------------|
------------|
------------|_______|
---------------------------
------------------
----------------------
----------------------------
------------------------
-----------|
-----------|
-----------|
-----------|_______________|

Basicaally like above (sorry, cant screenshot the project im working on :])

Code:

<div style="width:591px; position:relative; z-index:1;"> 

<div style="width:150px; height:100px; float:right;">
ZZZZZZZZZZZ
</div>
<div style="width:150px; height:100px; float:right;">
ZZZZZZZZZZZ 
</div>
<div style="width:291px; height:100px; float:left;"> 

asfasfasgsdgdsdbn gksdjbgvsdb gjkdgkjsdb gkjsdbgksd jb gjksgsd dkj kasfasfasgsdgdsdbn gksdjbgvsdb gjkdgkjsdb gkjsdbgksd jb gjksgsd dkj kasfasfasgsdgdsdbn gksdjbgvsdb gjkdgkjsdb gkjsdbgksd jb gjksgsd dkj k
</div>
<div class="clear"></div>
</div>

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?

My problem is with 2 textfields that I am using css to text attributes, all is well in IE, but in netscape and firefox the letters q,y,p the bottoms get cut off. Any suggestions greatly appreciated.
here is a link to the page i am working on
http://www.cfwilson.com/365c/index.htm
Charles

Hello,

If you go to http://tombraiders.net/katie/sid/index.html

User: letme
Pass: in

you'll see that the body text is shifted halfway down the page as well as the menu. Anyone know how I can fix this?

Also, how can I fix the rollover for the menu? I don't want the rollover coloured square to be so long.

Thanks!

Hi, I've recently built my first site using the Magento eccomerce paltform.

I'm having a problem with the text box for the item descriptions on the product pages. The problem is that on page load the item description drops about 200px and overlaps outside of the text box area.

This only happens in IE.

I'm sure this is a CSS stylign issue but i'm not entirely sure what needs to be done or which attribute wil fix it.

Any help would be appreciated. I'm not allowed to post urls on this forum as a new user but the website is a UK site called lowpricememory. The url is lowpricememory with dot co dot uk. You will see the problem on any product page.

Thanks, Tim