Problemen met <div> op mac
Ik weet niet of ik deze vraag kan stellen op een php-forum, maar ik probeer het toch...
Ik heb voor een vriend een website gebouwd, deze werkt perfect in IE op de pc. Die vriend van me gebruikt echter Safari (of Firefox) op zijn mac. Volgens hem valt de tekst steeds aan de rechterkant buiten de kaders.
Ik heb mijn site in 3 div's opgebouwd. 1 header, 1 inhoud en 1 footer. Deze 3 div's zitten in een andere div (de container). De inhoud kun je scrollen, de header en footer blijven altijd op zijn plek.
Volgens die vriend van me valt de scrollbalk (ook rechts) bij "Referenties" ook buiten het kader.
De opbouw van de site is redelijk simpel, wat kan hier mis aan zijn?
Dit is de css voor de 3 div's:
div#header
{
position: absolute;
height: 240px;
width: 750px;
top: 0px;
left: 0px;
width: 100%;
}
div#content
{
position: absolute;
height: 269px;
top: 240px;
width: 750px;
left: 0px;
width: 100%;
overflow: auto;
text-align: left;
background-image:url(images/background_content.gif);
padding-top: 30px;
padding-left: 50px;
padding-right: 90px;
}
div#bottom
{
position: absolute;
height: 91px;
width: 750px;
top: 509px;
left: 0px;
width: 100%;
}
De url van de site is www.suggestgraphics.nl. Kunnen jullie mij helpen want ik ben radeloos?!
Bij voorbaat dank!
Gr,
Robert
Gewijzigd op 01/01/1970 01:00:00 door Robert Hamers
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
body {
background:#000000;
color:#FFFFFF;
font-family: 'arial,helvetica';
font-size: 13px;
line-height: 23px;
scrollbar-3dlight-color:#A8A9AD;
scrollbar-arrow-color:#6D02A9;
scrollbar-base-color:#FFFFFF;
scrollbar-darkshadow-color:#A8A9AD;
scrollbar-face-color:#FFFFFF;
scrollbar-highlight-color:#C1D6A2;
scrollbar-shadow-color:#C1D6A2;
scrollbar-track-color:#000000;
}
td {
font-family: 'arial,helvetica';
font-size: 13px;
color: #FFFFFF;
line-height: 23px;
}
b
{
color: #B0BE97;
font-weight: bold;
font-size: 13px;
}
a img {
border: none;
}
A.link:link {text-decoration: none; font-weight: bold; color:#B0BE97;font-size: 12px; }
A.link:visited {text-decoration: none; font-weight: bold; color:#B0BE97;font-size: 12px; }
A.link:Hover {text-decoration: none; font-weight: bold; color:#C1D6A2;font-size: 12px; }
A.smalllink:link {text-decoration: none; color:#FFFFFF;font-size: 12px; }
A.smalllink:visited {text-decoration: none; color:#FFFFFF;font-size: 12px; }
A.smalllink:Hover {text-decoration: none; color:#C1D6A2;font-size: 12px; }
A.smalllink2:link {text-decoration: none; color:#C1D6A2;font-size: 12px; }
A.smalllink2:visited {text-decoration: none; color:#C1D6A2;font-size: 12px; }
A.smalllink2:Hover {text-decoration: none; color:#FFFFFF;font-size: 12px; }
.logo {
border: 0px solid #ADC07B;
}
div#page
{
margin: 0px auto;
width: 750px;
}
div#header
{
height: 240px;
}
div#content
{
height: 269px;
overflow: auto;
text-align: left;
background-image:url(images/background_content.gif);
padding-top: 30px;
padding-left: 50px;
padding-right: 90px;
}
div#contentadmin
{
height: 269px;
width: 750px;
top: 240px;
left: 0px;
width: 100%;
overflow: auto;
text-align: left;
background-image:url(images/background_content.gif);
padding-top: 10px;
padding-right: 10px;
}
div#contentportfolio
{
height: 269px;
width: 750px;
top: 240px;
left: 0px;
width: 100%;
overflow: auto;
background-image:url(images/portfoliobackground.gif);
background-repeat: repeat-y;
}
div#bottom
{
height: 91px;
width: 750px;
top: 509px;
left: 0px;
width: 100%;
}
div#client
{
height: 750px;
top: 0px;
left: 0px;
width: 100%;
overflow: auto;
text-align: left;
}
.portfoliocontent{
padding-left: 15px;
padding-right: 15px;
}
.portfoliocontentadmin{
padding-left: 15px;
background:#000000;
border-bottom-style:solid;
border-bottom-width: 2px;
border-bottom-color:#FFFFFF;
}
.portfoliologo{
padding-top: 20px;
padding-bottom: 20px;
border-bottom-style:solid;
border-bottom-width: 2px;
border-bottom-color:#000000;
background:#FFFFFF;
color:#000000;
}
h1
{
display: none;
}
background:#000000;
color:#FFFFFF;
font-family: 'arial,helvetica';
font-size: 13px;
line-height: 23px;
scrollbar-3dlight-color:#A8A9AD;
scrollbar-arrow-color:#6D02A9;
scrollbar-base-color:#FFFFFF;
scrollbar-darkshadow-color:#A8A9AD;
scrollbar-face-color:#FFFFFF;
scrollbar-highlight-color:#C1D6A2;
scrollbar-shadow-color:#C1D6A2;
scrollbar-track-color:#000000;
}
td {
font-family: 'arial,helvetica';
font-size: 13px;
color: #FFFFFF;
line-height: 23px;
}
b
{
color: #B0BE97;
font-weight: bold;
font-size: 13px;
}
a img {
border: none;
}
A.link:link {text-decoration: none; font-weight: bold; color:#B0BE97;font-size: 12px; }
A.link:visited {text-decoration: none; font-weight: bold; color:#B0BE97;font-size: 12px; }
A.link:Hover {text-decoration: none; font-weight: bold; color:#C1D6A2;font-size: 12px; }
A.smalllink:link {text-decoration: none; color:#FFFFFF;font-size: 12px; }
A.smalllink:visited {text-decoration: none; color:#FFFFFF;font-size: 12px; }
A.smalllink:Hover {text-decoration: none; color:#C1D6A2;font-size: 12px; }
A.smalllink2:link {text-decoration: none; color:#C1D6A2;font-size: 12px; }
A.smalllink2:visited {text-decoration: none; color:#C1D6A2;font-size: 12px; }
A.smalllink2:Hover {text-decoration: none; color:#FFFFFF;font-size: 12px; }
.logo {
border: 0px solid #ADC07B;
}
div#page
{
margin: 0px auto;
width: 750px;
}
div#header
{
height: 240px;
}
div#content
{
height: 269px;
overflow: auto;
text-align: left;
background-image:url(images/background_content.gif);
padding-top: 30px;
padding-left: 50px;
padding-right: 90px;
}
div#contentadmin
{
height: 269px;
width: 750px;
top: 240px;
left: 0px;
width: 100%;
overflow: auto;
text-align: left;
background-image:url(images/background_content.gif);
padding-top: 10px;
padding-right: 10px;
}
div#contentportfolio
{
height: 269px;
width: 750px;
top: 240px;
left: 0px;
width: 100%;
overflow: auto;
background-image:url(images/portfoliobackground.gif);
background-repeat: repeat-y;
}
div#bottom
{
height: 91px;
width: 750px;
top: 509px;
left: 0px;
width: 100%;
}
div#client
{
height: 750px;
top: 0px;
left: 0px;
width: 100%;
overflow: auto;
text-align: left;
}
.portfoliocontent{
padding-left: 15px;
padding-right: 15px;
}
.portfoliocontentadmin{
padding-left: 15px;
background:#000000;
border-bottom-style:solid;
border-bottom-width: 2px;
border-bottom-color:#FFFFFF;
}
.portfoliologo{
padding-top: 20px;
padding-bottom: 20px;
border-bottom-style:solid;
border-bottom-width: 2px;
border-bottom-color:#000000;
background:#FFFFFF;
color:#000000;
}
h1
{
display: none;
}
Je werkt met hele slordige css. Lees meer: moeilijke dingen gebruiken (position:absolute) als het niet nodig is.
1 column layout
Wat jij wilt met die fixed footer en header. Moet je position:fixed voor gebruiken.
Site: http://limpid.nl/lab/css/fixed/header-and-footer
Gewijzigd op 01/01/1970 01:00:00 door Kalle P
Maar ik ging er echt van uit dat je alleen met absolute waardes je <div>'s precies kan plaatsen. Maar blijkbaar worden de <div>'s netjes onder elkaar gezet zonder dat je de absolute waardes van het scherm doorgeeft.
Bedankt voor de tips!!! Ik ga eens vragen of de site na deze aanpassingen goed draait op de mac.
Gr,
Robert
Ik heb hier Safari, FireFox en Opera op m'n Mac staan. We hebben hier op een andere Mac ook nog een onvoorstelbaar brakke versie van IE ter beschikking...
Probeer dus ook eens te achterhalen welke browser er wordt gebruikt.
En ja divs worden netjes onder elkaar zet, mits je div {margin:0;padding:0;} hebt staan in je css.
Bij deze wil ik jullie bedanken voor het meedenken. Ik ben echt dagen bezig geweest met proberen.
phphulp.nl rules!!
Gr,
Robert