hi guys,
i know i am really bad at CSS .. i just cant ever get things, the way i want to .. so in the end i have to compromise :(
but i am asking you this question.. cause i cannot compromise in this..
Well i want to adjust texts in to extreme sides of a div
the source of the page is :: -
<div class='info'>
-
<img src=./ask/img/cup.gif width=50 height=50 id='uio' />
-
<div id='dateinfo'><ul><li>July12,2009</li><li>kok</li></ul>
-
</div>
-
<div class='data'>admin<br>
-
39 posts
-
</div>
-
</div>
-
The CSS for this :: -
.info{
-
padding:5px 0px 0px 3px;
-
background:#F3F6FB;
-
height:70px;
-
margin-top:2px;
-
border-bottom:1px solid #CDDAEF;
-
-
}
-
-
#dateinfo ul{
-
float:right;
-
position:relative;
-
}
-
#dateinfo li{
-
list-style:none;
-
}
-
-
.data{
-
margin-left:10px;
-
float:left;
-
-
}
-
-
-
It shows perfect in IE but messed in FFx..
there must be something to do with position and stuff..
can you jus guide me.. thanks :)
AND yeah here is the doctype which i am using -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
14  1590 
The problem is IE, as always. While IE may be showing what you want, it is actually displaying a bug. Elements are NOT to expand to contain floated elements. Firefox is performing correctly.
Just add 'overflow:auto' to #info and give it a little more height to accomodate the content. Also, don't forget quotes around your src for the image.
The problem is IE, as always. While IE may be showing what you want, it is actually displaying a bug. Elements are NOT to expand to contain floated elements. Firefox is performing correctly.
Just add 'overflow:auto' to #info and give it a little more height to accomodate the content. Also, don't forget quotes around your src for the image.
hello,
thanks for the reply.. now my info looks like - .info{
-
padding:5px 0px 0px 3px;
-
background:#F3F6FB;
-
height:100px;
-
margin-top:2px;
-
border-bottom:1px solid #CDDAEF;
-
overflow:auto;
-
-
}
but the problem is still there.. i have even enclosed the image name along with its path in single quotes, as it was left by chance.. but still no luck ..
What do i do now ??
thanks :)
Are you clearing your cache? It works for me.
Are you clearing your cache? It works for me.
yup ofcourse i cleared the 50MB cache that ffx holds.. and refreshed it.. i also tried copying the above code to a new file test.html and opened but no luck :(
it still gives the same problem ..
Then I must misunderstand the problem. Originally you said you wanted "to adjust texts in to extreme sides of a div" which I wasn't sure what you meant, but I saw the div didn't expand to contain the floats so I thought that was the real problem. So I guess I lost sight of the real issue but I don't know what you mean by "adjust texts in to extreme sides of a div".
Then I must misunderstand the problem. Originally you said you wanted "to adjust texts in to extreme sides of a div" which I wasn't sure what you meant, but I saw the div didn't expand to contain the floats so I thought that was the real problem. So I guess I lost sight of the real issue but I don't know what you mean by "adjust texts in to extreme sides of a div".
its just like in here..
see above the post..
where the name realin is written and a pic is entitled
on the right extreme we have the date and time and the thread or post number.
so this way i wanna represent text..
If you want the text on the right to have a margin, add 'margin-right:10px' to '#dateinfo ul'. If you do not want the margin on the left text, remove 'margin-left:10px' from '.data'.
it's the image on the left, try reversing these two lines...
[HTML]
<div id='dateinfo'><ul><li>July12,2009</li><li>kok</li></ul>
</div>
<img src=./ask/img/cup.gif width=50 height=50 id='uio' />
[/HTML]
im new at giving advise, normally taking it. so i hope it helps, and sorry if im wrong.
Ah, now I see. English is not your native tongue so it wasn't quite clear what you wanted.
I didn't look at recordlovelife's solution but, yes, the image is causing the gap. An image is 'inline' so it occupies the full width of the page. You can float the image left for a partial cure but you also need to remove the margins for the <ul> -
.info{
-
padding:5px 0px 0px 3px;
-
background:#F3F6FB;
-
height:70px;
-
margin-top:2px;
-
border-bottom:1px solid #CDDAEF;
-
-
}
-
-
#dateinfo ul{
-
float:right;
-
position:relative;margin-right:10px;
-
margin:0
-
}
-
#dateinfo li{
-
list-style:none;
-
}
-
-
.data{
-
margin-left:10px;
-
float:left;
-
-
}
-
.info img{
-
float:left
-
}
it's the image on the left, try reversing these two lines...
[HTML]
<div id='dateinfo'><ul><li>July12,2009</li><li>kok</li></ul>
</div>
<img src=./ask/img/cup.gif width=50 height=50 id='uio' />
[/HTML]
im new at giving advise, normally taking it. so i hope it helps, and sorry if im wrong.
hi thanks for the help.. but still its the same :(
Ah, now I see. English is not your native tongue so it wasn't quite clear what you wanted.
I didn't look at recordlovelife's solution but, yes, the image is causing the gap. An image is 'inline' so it occupies the full width of the page. You can float the image left for a partial cure but you also need to remove the margins for the <ul>
-
.info{
-
padding:5px 0px 0px 3px;
-
background:#F3F6FB;
-
height:70px;
-
margin-top:2px;
-
border-bottom:1px solid #CDDAEF;
-
-
}
-
-
#dateinfo ul{
-
float:right;
-
position:relative;margin-right:10px;
-
margin:0
-
}
-
#dateinfo li{
-
list-style:none;
-
}
-
-
.data{
-
margin-left:10px;
-
float:left;
-
-
}
-
.info img{
-
float:left
-
}
hey wow this just worked
much of thanks :)
hi thanks for the help.. but still its the same :(
in Safari, it fixes it. I just saw though, that in FF it doesn't. Ill keep pokin'.
#dateinfo ul{
float:right;
margin:0;
padding:0;
}
that fixed it for me in Safari and FF
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Graham Cross |
last post by:
Dear All
Is there an HTML way of aligning the images on this page
http://www.ageconcernleics.com/review03/chairs03.html
so that they appear evenly spaced relative to the text column on the...
|
by: richards1052 |
last post by:
I write a blog & have html code which I use to float images right &
left in my posts. But I often see images surrounded by text on all 4
sides. Can anyone tell me a not too complex way I can do...
|
by: Linux Boy via .NET 247 |
last post by:
(Type your message here)
Hi everyone,
I would like to ask a question about aligning text within one label.
I have an application that everytime the user click on Enter Record button, they will...
|
by: Claudio Grondi |
last post by:
In the process of learning about some deeper details of Python I am
curious if it is possible to write a 'prefix' code assigning to a and b
something special, so, that Python gets trapped in an...
|
by: Griff |
last post by:
I've a (classic) ASP web page that has several tables on it that have
identical columns (headings).
When these tables are displayed they of course have different widths, based
upon the amount of...
|
by: rn5a |
last post by:
Can someone please suggest me a text editor especially for DEBUGGING
ASP scripts apart from Microsoft Visual Interdev?
I tried using Visual Interdev & created a project but Interdev
generates...
|
by: agbee1 |
last post by:
Hello:
I've finally made the effort to ween myself from overly using tables and use CSS for my positioning. However, I am having a problem with my navigational menu properly aligning in Firefox,...
|
by: David Barr |
last post by:
I am brand new to Python (this is my second day), and the only
experience I have with programming was with VBA. Anyway, I'm posting
this to see if anyone would be kind enough to help me with this...
|
by: unstoppablekatia |
last post by:
I have a website that has images on it, and underneath the images are text. My only option of aligning the images and text separate from each other, is to do <div align="right">, <center>, or <div...
|
by: Faith0G |
last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome former...
|
by: ryjfgjl |
last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
| |
