14 replies [Last post]
Oneill
Offline
newbie
Last seen: 14 years 13 weeks ago
Joined: 2007-08-30
Posts: 7
Points: 0

Hello everyone. First post here.
I started learning CSS today, and so far i built a whole layout using it. It was all going great untill i opened the website with Firefox (im was using Safari)

The layout is all messed up. The problem is simple, all the "Float:right" tags arent doing anything and the divs are on the wrong place.

These are the documents u need. I Hope you can help me, cause i've lost half of my mind trying to figure this out.. =/
Thank you :blushing:

http://217.129.24.130/~Brain/AEiscia/layout.html
http://217.129.24.130/~Brain/AEiscia/css/style.css

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 1 year 32 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

Hi, I've had a quick look at

Hi, I've had a quick look at the code and have noticed a few problems.

For the right nav to appear where you want it move the following code






User:

Pass:






Ultimos:
Eventos:

Eventos numero 1
Eventos numero 2
Eventos numero 3
Eventos numero 4
Eventos numero 5
Utilizadores:

Eventos numero 1
Eventos numero 2
Eventos numero 3
Eventos numero 4
Eventos numero 5


from

to between the tags, as atm the div has no content. Check from there, works in Firefox and IE7.

Also if this is a new site you should really if possible be coding to the Strict Doctype

Another thing is that the layout uses tables, not a good idea really unless you have specific need for them, you can recreate this layout with divs and position with css quite easily. Search this forum for 'converting from tables'. Or just click this link http://csscreator.com/search/node/converting+from+tables

And remember to check in Firefox 1st as it shows pages in the way they should be, it adheres better to the web standards than other browsers. Get it right in Firefox and only then check it and adjust for other ones.

This will be a start, post again when you need to.

Oneill
Offline
newbie
Last seen: 14 years 13 weeks ago
Joined: 2007-08-30
Posts: 7
Points: 0

nop thats not the problem.

nop thats not the problem.
the problem is the floats arent working.

Any other idea? this is disturbing me =_=

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 1 year 32 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

Ok, also when I delete the

Ok, also when I delete the code

it renders correctly here?

Or just had another look,

adjust the code to this


Oneill
Offline
newbie
Last seen: 14 years 13 weeks ago
Joined: 2007-08-30
Posts: 7
Points: 0

Doesnt work also

Doesnt work also

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

Can you post your latest

Can you post your latest code you're using, please?

Verschwindende wrote:
  • CSS doesn't make pies

Oneill
Offline
newbie
Last seen: 14 years 13 weeks ago
Joined: 2007-08-30
Posts: 7
Points: 0

site: http://217.129.24.130/~

site:
http://217.129.24.130/~Brain/AEiscia/layout.html
css:
http://217.129.24.130/~Brain/AEiscia/css/style.css

sketch:
http://217.129.24.130/~Brain/AEiscia/layout.png

i keep updating it

i made a sketch of what it should look like, and where the divs are.
the divs "clock" , "navright" and "mainright" are inside of the divs "topo", "nav" and "main" with "float:right;" on their CSS

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

Three things before we go

Three things before we go any further:

1) Your HTML needs validating.

2) You need to contain/clear your floats

3) Floated content must come before non-floated content.

Verschwindende wrote:
  • CSS doesn't make pies

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 1 year 32 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

Try this, works in Firefox

Try this, works in Firefox and IE7. I have moved the NavRight Div, have a look and see where. Also corrected some tags that weren't closed and corrected errors in size code, when put into html you do not need the px after the number.

All of these you should have corrected first.

AEISCIA - Associação de Estudantes do ISCIA

var tick;
function stop() {
clearTimeout(tick);
}
function simpleClock() {
var ut=new Date();
var h,m,s;
var atoj4;
var time=" ";
h=ut.getHours();
m=ut.getMinutes();
s=ut.getSeconds();
if(h==0){atoj4=" AM";atoj1=12}
else if(h <= 11){atoj4=" AM"}
else if(h == 12){atoj4=" PM";h=12}
else if(h >= 13){atoj4=" PM";h-=12}

if(s<=9) s="0"+s;
if(m<=9) m="0"+m;
if(h<=9) h="0"+h;
time+=h+":"+m+":"+s+" - "+atoj4;
document.getElementById('clock').innerHTML=time;
tick=setTimeout("simpleClock()",1000);
}

body {
margin:0px 182px 0px 182px;
background-image:url(../images/bggradient.png)

}

.content, .top, .clock, .dimage, .nav, .navright, .main, .mainright, table, .footer
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
}

.content
{
width:663px;
height:0%;
background-color:grey;

}

.topo
{
height:16px;
background-image:url(../images/topmain.png);
background-repeat:no-repeat;
padding-left:5px;
color:#333333;

padding-top:1px;
}
.clockdiv
{
float:right;
height:16px;
padding-right:6px;
padding-top:1px;
}

.dimage
{
height:220px;
background-color:#999999;
}

.nav
{
height:33px;
background-image:url(../images/navbarleft.png);
background-repeat:repeat-x;

}

.navright
{
width:154px;
height:33px;
float:right;
background-image:url(../images/navbarright.png);
background-repeat:no-repeat;
font-size:12px;

}

.main
{
background-color:#FFFFFF;
padding-left:20px;
padding-bottom:10px;
height:500px;

}

.mainright
{

float:right;
width:144px;
height:360px;
background-image:url(../images/loginstuff.png);
background-repeat:no-repeat;
padding-left:10px;
border: 2px solid red;
}

table.tabelainfo {
width:460px;
border-width: 1px;
border-style: dashed;
border-color:#003366;
border-collapse: collapse;
}

table.tabelainfo td {
border-width: 1px;
padding: 4px;
border-style: dotted;
border-color: gray;
background-color:#DDDFFF;
}

table.tabeladireita
{
border-collapse:collapse;
border-style:solid;
}

table.tabeladireita td {
border-width: 1px;
border-style: dotted;
border-color: gray;
}

input.input
{
border-width: 1px;
border-style: dotted;
border-color: gray;
background-color:white;

}

input.botao
{
border-width: 1px;
border-style:groove;
background-color:#EEEEEE;
font-size:10px;

}

.footer
{
height:10px;
background-color:#CCCCCC;
color:white;
padding-left:5px;
}

.ibotao {border:0px;}

a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active{ text-decoration:none; }

AEISCIA - Associação de Estudantes do ISCIA
head

Noticia Titulo: Segunda Noticia!

No inicio do ano 2007/2008 a AE ganhou um novo "look". As alterações nao foram apenas visuais. Novos donos, e novo "escritório".

 

Esta é a primeira noticia da nova página.

Utilizador: João Guiomar Data:30/Agosto/2007 @ 1:26 AM
Noticia Titulo: AE com um novo look!

No inicio do ano 2007/2008 a AE ganhou um novo "look". As alterações nao foram apenas visuais. Novos donos, e novo "escritório".

 

Esta é a primeira noticia da nova página.

Utilizador: João Guiomar Data:30/Agosto/2007 @ 1:26 AM

You'll have to separate the css from html yourself.

Oneill
Offline
newbie
Last seen: 14 years 13 weeks ago
Joined: 2007-08-30
Posts: 7
Points: 0

DisinfectedBarfbag: that

DisinfectedBarfbag: that doesnt work.

thepineapplehead:
1) the page at some point was validated and the problem was still there.

2) i have no idea what tha mens
3) same as 2)

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 1 year 32 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

Here's my screen grab, what

Here's my screen grab, what is wrong (apart from the red border)?

We need a more detailed description.

AttachmentSize
teste teste teste.png 35.21 KB
Oneill
Offline
newbie
Last seen: 14 years 13 weeks ago
Joined: 2007-08-30
Posts: 7
Points: 0

yay its fixed. someone else

yay its fixed. someone else helped me.

according to what i he said, i just had to change the position of the divs.

example:

i had the following:

-div class="topo"-TEXT -div class="clock"- clock here -/div--/div-

and what he did was:
-div class="topo"--div class="clock"-Clock Here-/div-TEXT-/div-

http://217.129.24.130/~Brain/AEiscia/layout.html this is the working URL.

Thanks for the help :thumbsup:

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 1 year 32 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

2) and 3) can be researched

2) and 3) can be researched here and all over the web, google 'clearing floats' for example. We can help but you must also be willing to do research yourself.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 4 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

Oneill wrote: i had the

Oneill wrote:

i had the following:

-div class="topo"-TEXT -div class="clock"- clock here -/div--/div-

and what he did was:
-div class="topo"--div class="clock"-Clock Here-/div-TEXT-/div-

I'm pretty sure I already told you that, when I said floated content must come before non-floated content.

And you could have looked it up on Google or asked me to clarify before ignoring my response and asking somebody else.

Verschwindende wrote:
  • CSS doesn't make pies

Oneill
Offline
newbie
Last seen: 14 years 13 weeks ago
Joined: 2007-08-30
Posts: 7
Points: 0

I didnt ignore your comment,

I didnt ignore your comment, if u see above:
"
DisinfectedBarfbag: that doesnt work.

thepineapplehead:
1) the page at some point was validated and the problem was still there.

2) i have no idea what tha mens
3) same as 2)
"

You told me to validate it, and i did, actually it was already validated, but i replace the for a different one and the validation encounted 72 errors again. I changed it back to the previews Doc type and it validates nicely.

I didnt understand what u said about the float first then non-float, i got a bit confused. But now that i read it again understanding what u meant, yeah u already had the solution for my problem. And thank you for that.

I googled before coming to this forum. I found alot of "solutions" some really odd, i tried a few an nothing happened besides confusing me even more. I also had 2 friends trying to figure it out and one of them actually found the problem. I didnt meant to ignore you answer at all =)

Thanks for all the help.