Thu, 2005-07-14 17:12
Hi again friends!
I decidet to make a small personal site about me to get into the css layouts technique.So the problems appear in IE 6.0(I have tested it only on FireFox and IE).See how it looks in FF:
http://ata.botevgrad.com/develop/toni/first/ff.jpg
and in IE:
http://ata.botevgrad.com/develop/toni/first/ie.jpg
link to HTML:
http://ata.botevgrad.com/develop/toni/first/index.html
link to CSS:
http://ata.botevgrad.com/develop/toni/first/style.css
The problems are:
1. In IE the menu doesn't look like it has to(you probably noticed it...).How can I fix it?
2. In IE the right content doesn't stick to the left floated part of the site...What seems to be the problem here?
3. This is not a problem - it's a question.What do I have to do so the dashed border on the right of left floated div can goes all the way down to teh bottom of the main div?I can make the border to belong to the right div but I really wanna know how to do this effect without giving a border to the right element.
4. I'm newbie yet so I'll take your advices...what can I remove from the code,what should I add....everything you think is wrong!
Please help me... :?
Thu, 2005-07-14 17:19
#1
A couple of problems in IE
I have the exact same problem. It has to do with the width but I was never able to fix it.
Thu, 2005-07-14 18:01
#2
A couple of problems in IE
a soleved the problem number 2.The width of the right div was 500px and the padding is 10px so I just make the width 490px and everything now is fine...Please help me with the other problems :roll:
Thu, 2005-07-14 18:04
#3
A couple of problems in IE
The padding issue is to do with the Box Model, and the way different browsers interpet it.
Thu, 2005-07-14 18:11
#4
A couple of problems in IE
First thing to do is get the browsers rendering in standards mode that is with either a doctype without definition or one with and a full url.
Then I would look carefully through all your widths , paddings and margins as your flying close to the wind where overall width to hold the floats is concerned try reducing everything until you see what is pushing the content down in IE.
The dashed border could be achieved by using height:100% on the body and left column if you were sure that they would not be increasing in height but as this unlikely the usual method of achieving this effect is known as 'faux columns' googling will throw up the appropriate tutorial on the technique.
Hugo.
Thu, 2005-07-14 21:14
#5
A couple of problems in IE
I'm back with another problem.But first - thanks all for the replays and advices 
.So now the problem is called "text-align: right;".It works great in IE but FF doesn't seem to recognize this line of code...
the code is:
ul.menu li {
display: block;
width: 199px;
height:31px;
background-image: url('button.jpg');
margin: 0px;
text-align: right;
}
and in FF it only goes about 10-20px of the left border 
.
Thu, 2005-07-14 23:39
#6
A couple of problems in IE
Try making the width of the anchor 100% and remove the width from the hover.
Are you going to follow the advise about switching browsers into standards mode ?
Hugo.
Fri, 2005-07-15 09:40
#7
A couple of problems in IE
Hugo I really want to,but I don't know how to do it(just don't understand how to switch the browser to standarts mode).So that works thank you again...But in the right div appers some extra space about 2-3px and if I don't set the background of the hole main conteiner to white and the body background to black it is visible.
How do I count the space that is needed for the conteiner?I thought the border-right(1px)the padding-left(10px) and the width of this div should be 489px but it has to be at least 485px why?
Fri, 2005-07-15 10:32
#8
A couple of problems in IE
You should have said that you weren't sure how to use a full DTD
this one is the full url version of the one your using and will switch browsers into standards mode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
You count the width of element differently between IE and FF if your in quirks mode then IE uses the broken box model and padding and borders are part of the stated width, on the other hand when in standards mode then the correct box model is used and padding values and borders are added to the stated width to arrive at an overall width.
Hugo.
Fri, 2005-07-15 10:59
#9
A couple of problems in IE
I'm not sure I understand this one...I did how you said about the doctype but still in IE the width of the right div must be 485px so the layout could look good...and I just can't get it - how to count those values :roll:
Fri, 2005-07-15 16:53
#10
A couple of problems in IE
If as you are now rendering in standards mode the correct box model is being used this means that if you state a width on a div and have padding or borders on the div then the true width or the space that the div will take up is the stated width + padding value + border value
Try not to have padding on the main layout divs as it just causes problems.
In Firefox you have a collapsing margin problem which is pushing the div.bottom away from the top container in the div.bottom add padding-top 1px to cure the problem and close the gap up.
Hugo.
Sat, 2005-07-16 13:31
#11
A couple of problems in IE
am I don't see any gap in firefox :shock:anyway... Hugo thank you very much again 
I'm very happy that there are still people like you - ready to help 
P.S. I'm sure I'll have another questions so...see you soon
Sat, 2005-07-16 14:31
#12
A couple of problems in IE
well yes as I said see you soon :PpPpSo now the problem is in firefox(I didn't see how it looks on opera or safari...)In IE it looks great but FF cause some troubles.In ff between the 3 divs(ctop,cmiddle and cbottom) there are 2 gaps and I don't know how to close them.First it seemed to me like a margin collapse but I set all margins to 0 and it didn't change.Please help me and explain me why does it happening.
And one more question: I'll have more of this boxes so the page will become very long,and I want to ask you how can I just put a right scroller to the bottom_right div and just scroll all the boxes and the text(the overflow: scroll doesn't seem to work because it only puts right and bottom scrollers to all of the boxes...)
in IE:
http://ata.botevgrad.com/develop/toni/first/ie.jpg
in FF:
http://ata.botevgrad.com/develop/toni/first/ff.jpg
css code:
div.bottom_right {
width: 488px;
float: right;
padding: 0px;
font-size: 13px;
font-family: Verdana;
font-weight: bold;
margin-left: 0px;
}
div.content {
width: 450px;
margin: 0px auto;
font-size: 0;
}
div.ctop {
width: 450px;
height: 75px;
margin: 0px;
padding: 0px;
text-align: center;
font-size: 13px;
color: red;
background-image: url('content-top.jpg');
}
p.ctop-text {
position: relative;
top: 25px;
}
div.cmiddle {
width: 450px;
margin: 0px;
padding: 0px;
font-family: verdana;
font-size: 11px;
color: white;
background-image: url('content-middle.jpg');
background-repeat: repeat-y;
}
p.cmiddle-text {
position:relative;
left: -10px;
padding-left: 15px;
padding-right: 15px;
display: block;
width: 400px;
}
div.cbottom {
width: 450px;
height: 74px;
margin: 0;
padding: 0;
background-image: url('content-bottom.jpg');
}
html code:
<div class="bottom_right">
<div class="content">
<div class="ctop"><p class="ctop-text">the welcome message</p></div>
<div class="cmiddle">
<P class="cmiddle-text">the content text is here</P>
</div>
<div class="cbottom"></div>
</div>
</DIV>
Sat, 2005-07-16 16:48
#13
A couple of problems in IE
BeakBd the problem does not lie with the .ctop , .cmiddle divs but with the p.cmiddle-text. The paragraph tag has margins, zero these and you should be ok.
I'm afraid that you will need to explain the scrolling issue a little more clearly.
Can you not add overflow:auto to the div.bottom_right and a fixed height then any .content boxes inside that div but out side of the fixed height area will be scrollable by the scroll bar that will appear on the botom_right div
Hugo.
Sat, 2005-07-16 16:59
#14
A couple of problems in IE
well I already quit the idea with scrolling because I think it will look uglier ).Yeah thank you,the margin of this p.cmiddle-text was the problem,now it looks good.
I can't understand how can you see these stupid mistakes and I can't 
I hope I'll learn to see them in the future
10x a lot again you really helping me
Sun, 2005-07-17 12:14
#15
A couple of problems in IE
sorry I'm bothering you again...now I have some troubles with <form> Since I put form the whole page messed up (Only in FF) :roll:
so let's see how it looks:
IE:
http://ata.botevgrad.com/develop/toni/first/ie.jpg
FF:
http://ata.botevgrad.com/develop/toni/first/ff.jpg
css code:
http://ata.botevgrad.com/develop/toni/first/style.css
the page:
http://ata.botevgrad.com/develop/toni/first/index.php
I'm truly sorry I'm asking you again but I stay whole night to figure it out(the other pages with forms look strange too...) and I just can't get it So please explain me why does it happening(some explanation about forms,inputs,and textareas will be great for me)
Sun, 2005-07-17 15:49
#16
A couple of problems in IE
I would try taking the form out of the p element wrap the form elements in a fieldset and then start applying some styling/positioning to the elements you could try a width on the form and auto margins to center it.
Forms can be tricky it might be worth Googling for some tutorials.
Hugo.
Sun, 2005-07-17 17:07
#17
A couple of problems in IE
10q but can you tell me something about the other problem(it's very strange) - something is wrong with background color :?
look:
http://ata.botevgrad.com/develop/toni/first/ff.jpg
the whole conteiner should be with white background and it is but only in IE
and one another thing - what does this mean:
Line 7, column 6: end tag for element "HEAD" which is not open
Sun, 2005-07-17 17:34
#18
A couple of problems in IE
BreakBD you need to clear your floats, floats by their nature break out of their parent container, they are removed from the normal flow of the page, because of this they will not expand the container div.bottom as they increase in height.
the way round this is to use a clearing element after the floats as the last element in the parent container. This forces the parent to expand to include this non floated element.
The best technique for this is to be found on this forum, look at the index page for the link to "clearing contained floats" and study the method then copy and paste the code to your styles.
I know that you state on your site "I'm too lazy to make it better" but you're not doing badly. With CSS there is a certain amount of study required to fully understand some of it's properties and the way they behave.
With a transitional html DTD you do not need to close empty tags such as the link, remove those, but with the link you do need to state the file type i.e type="text/css" make those changes and see if the head problem still persists.
Hugo.