Page 1 of 1

Mozilla: aligning divs(More problems)

Posted: Mon Aug 29, 2005 8:01 am
by raghavan20
look at http://raghavan20.allhyper.com
login to the chat.
It works well at IE except one problem.
1. you can see a div where we post messages and a textarea beneath it where we type in chat messages. each of them have the same margin-left value but still they dont align vertically at the same point. why???

Regarding Mozilla:
2. If you open the appln in Mozilla, it should be very close to being a horrible design.
The userWindow that's where I display the users' list goes atop compared to the nearby chat messages window. Actually both of them have the same margin-top value which works fine in IE but not in Mozilla...why???

3.There is a 2px margin-left between userWindow and chatWindow which does not work...why???

4. If you see the Send button near the right end of the textarea it does not align horizontally but does with IE. why?? FYI, both the textarea and the button are in the same div not wrapped by span elements.

My css employed:

Code: Select all

body {
	background-image:url(background.gif);
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:.8em;
	width:80%;
}

html, body {
	height:100%;
}

.rAlign{
	text-align:right;
}

.lAlign{
	text-align:left;
}
.cAlign{
	text-align:center;
}

.chatWindow{
	background-color:#CCCCCC;
	color:#000099;
	width:300px;
	height:240px;
	border:3px solid #000000;
	float:left;
	padding:10px;
	margin-top:20px;
	margin-left:20px;
}

.userWindow{
	margin-top:20px;
	margin-left:2px;
}

.inputDiv{
	margin-top:3px;
	margin-left:20px;
}

.groupControls{
	margin-top:6%;
	margin-left:10%;
}
.leftMainDiv{
	background-color:#FFFFFF;
	color:#333333;
}

.rightMainDiv{
	background-color:#333333;
	color:#FFFFFF;
}

.displayChatName{
	font-weight:bolder;
	text-transform:capitalize;
	color:#990000;
}
.displayChatMessages{
	color:#3366FF;
}

.title{
	background-color:#000099;
	color:#FFFFFF;
	font-weight:bolder;
	font-size:1.2em;
	text-align:center;
}

.login{
	color:#000000;
	margin-top:100px;
	margin-left:20%;
	width:70%;
	float:none;
}

.subMenuDiv{
	background-color:#400040;
	color:#FFFFFF;
}

.button1{
	background-color:#CCCCCC; color:#000000; height:40px; width:60px; border: 2px solid #000000;
	text-align:center;
}


.textArea{
	border:2px solid #000000;
	background-color:#CCCCCC;
	color:#003366;	
}

.select{
	border:2px solid #000000;
	background-color:#CCCCCC;
	color:#003366;	
	font:Icon, Verdana, Arial;
}

.listRooms{
	text-align:left;
	padding:5px;
	
}

div.loginHeader{
	background-color:#000099;
	color:#FFFFFF;
	height:10%;
	font-weight:bolder;
	font-size:1.2em;
	text-align:center;
	padding-top:5px;
	padding-bottom:5px;

}
div.header{
	background-color:#003399;
	color:#FFFFFF;
	height:10%;
	min-height:10%;
	margin-left:10%;
	margin-right:10%;
	padding-top:1%;
	padding-bottom:1%;
}

Posted: Tue Aug 30, 2005 9:08 am
by raghavan20
I have got another problem in my another website
http://raghavan.allhyper.com/homePage.php

you can see a banner which is actually a div with margin-left:46px.
you can see a search div right below it with the same margin-left:46px.
but they dont align properly in IE but works fine in Mozilla...why???

EDITED (one more problem added)

Posted: Tue Aug 30, 2005 10:04 am
by raghavan20
Another problem with my personal website
http://www50.brinkster.com/raghavan20/a ... efault.asp
I have got menus; each menu made of span and all spans are enclosed in a div.
the spans have their border-top,left and right enabled.
This does not work in IE; it display border-left and right only; but works as I wanted in Mozilla...why???

More problems: simple things does not work
http://www50.brinkster.com/raghavan20/a ... lLinks.asp
I have got a short messages in span with color:#something;

Code: Select all

<span style="color:#0066CC">[Please use the sublinks on the right pane]</span>
this works fine in Mozilla but not in IE; the color does not work...why???


Div overflow/height problem:
http://www50.brinkster.com/raghavan20/a ... ources.asp
I have a common div, mainContent which can have different content depending on the pages.
If I set height:auto, the div shrinks to content making it ugly
If I set height:somepixels; I cant do this because one page has more than 700 to 800 px in height while others have less than 300 pixels so I think can not be generalized
If I set height:100%(which is currently runnig); If the content is more than 100% of the screen the content goes out of the div in Mozilla but works fine in IE

I am totally fedup with CSS. :evil:
I am seriously thinking of going back to tables instead of divs in many instances :evil:

Posted: Tue Aug 30, 2005 10:21 am
by nielsene
I just took a quick look; haven't found the cause of the problems yet. However the source HTML is quite "messy" -- tons of embeded JS throughout and lots of style="foo" attributes.

If you need to apply more than a single CSS attribute to an element, I'd suggest you move it to the CSS style sheet and use the class/id. It'll make it much easier to focus on content versus presentation.

I also doubt it validates; I see missing end tags/empty tags. Without properly validating code, all bets are off on if the CSS will work in the first place. You'll also probably need to add a <fieldset> pair of tags inside the form, which I think will help with the first problem you mentioned.

Posted: Tue Aug 30, 2005 10:28 am
by raghavan20
I admit that there is a lot of injected code from the host allhyper.com which I can not do anything about it unfortunately :cry:
but if you had a look at the problems with the brinkster host; it does not have injected my code alone. so atleast you can help me find solution for that. :)

Re: EDITED (one more problem added)

Posted: Tue Aug 30, 2005 12:03 pm
by nielsene
raghavan20 wrote:Another problem with my personal website
http://www50.brinkster.com/raghavan20/a ... efault.asp
I have got menus; each menu made of span and all spans are enclosed in a div.
the spans have their border-top,left and right enabled.
This does not work in IE; it display border-left and right only; but works as I wanted in Mozilla...why???
The normal answer "because MSIE has a messed up box model".

I'm actally not sure what's triggering its bad behavoir this time. I can fix it by either adding at least 3 pixels of padding-top to the #mainMenu or increasing the line-height in mainMenu. I think I prefer the line-height version as it also fixes things nicely if the spans wrap to a new line. 1.5em was working well for me.

Posted: Tue Aug 30, 2005 2:19 pm
by raghavan20
first of all thanks very much for that :)
I come to know that the #mainMenu is overlapping the banner div.
I set the lineheight to 1.3em which works fine; 1.2 does not work
did you see this one there?

More problems: simple things does not work
http://www50.brinkster.com/raghavan20/a ... lLinks.asp
I have got a short messages in span with color:#something;
Code:

Code: Select all

<span style="color:#0066CC">[Please use the sublinks on the right pane]</span>
this works fine in Mozilla but not in IE; the color does not work...why???
thanks again mate. I hope my other problems would soon be solved.

Posted: Wed Aug 31, 2005 6:16 am
by raghavan20
I managed to put some of the divs in a table so it does not act more erratically.
Now, still I have a few deviations from the original way it should look
http://raghavan20.allhyper.com/index.php
1. if you login, you can see the userWindow select control stands a little above to the chatWindow div.
I still have margin-top:2px to bring it down; but it does not work

2. you can see the button to submit messages, that looks like vertically aligned in IE and bottom aligned in Mozilla. I tried valign=middle at the correct <td>; but it does not work
I want someone to help me vertically align in the middle so it goes in parallel with the nearby text area.

3. anybody know to remove the scroll bar that Mozilla puts for a select control?

any help deeply appreciated.