Onderwerp: Webhosting Website

Maak je website werkend in Chrome/Firefox/Opera (die werken bijna allemaal gelijk als je code goed is, sommige hebben extra css waarden nodig, maar dat heeft dan weer geen effect op de andere..)

En ga dan d.m.v. Conditional Comments het werkend krijgen voor Internet Explorer 7.
En daarna voor IE6...

BIj Chrome/Opera/Safari zijn de zelfde fouten. De sidebar staat links naast de pagina.
Verder wordt alles goed weer gegeven. Iemand een id wat ik binnen de css moet aanpassen. ik heb mijn css bijgevoegd en ik denk dat er maar ene kleine aanpassing nodig is.

Css:

/*
Theme Name: Universal-isp
Version: 0.1

The CSS, XHTML and design is released under a GPL:http://www.opensource.org/licenses/gpl-license.php

*/

/* Social Style
********************* */

html
{
padding: 0;
margin: 0;
height: 100%;
}
*
{
padding: 0;
margin: 0;
}
img
{
border: 0;
}
img.centered {
text-align: center;
}
img.alignright {
float: right;
margin: 0 0 4px 4px;
}
img.alignleft {
float: left;
margin: 0 4px 4px 0;
}
.alignright {
text-align: right;
}
.alignleft {
text-align: left;
}

p
{
line-height: 1.6em;
margin: 0.7em 0;
}
dl
{
margin: 1em 0;
}
dt
{
font-weight: bold;
}
dd
{
margin: 0.5em;
padding: 0;
}

hr
{
display: none;
}
body
{
font: 75%/170% Arial, Helvetica, sans-serif;
margin: 0 0 30px;
padding: 0;
text-align: center;
}
a
{
text-decoration: none;
}
a:link, a:visited
{
color: #666;
}
a:hover, a:active
{
}
h1, h2, h3, h4, h5, h6
{
font-family: Helvetica, Arial, Sans-Serif;
}

/* Etc
******************** */
br.clear {
clear: both;
}

/* Design
******************** */
#page {
text-align: left;
width: 750px;
background: #fff;
position: relative;
}
.tekst_kleur_bolt {
color: #6fba04;
font-weight: bold;
}
.tekst_kleur {
color:#6fba04;
}
#sub-page {
}
#pager {
height: 100px;
width: 750px;
border-bottom: 1px solid #0082C3;
margin-bottom: 20px;
background-image: url(images/bg/banner_V2.png);
background-position: center;
}
#headr {
height: 0px;
margin: 20px 0 10px 10px;
padding: 0;
text-align:center;
position: relative;
}
#headr #logr {
display: block;
position: absolute;
left: 0;
top: 50px;
width: 400px;
height: 59px;
}
#headr h1 a {

color: #000;
font-size: 1.8em;

}
#headr .description {
color:#286D80;
}
#headr .search {
position: absolute;
top: 10px;
right: 0;
}
#cari-padangan {
position: relative;
height: 65px;
}
#cari-padangan #s {
border: 2px solid #93D1DD;
padding: 5px;
margin-bottom: 8px;
width: 250px;
}
#cari-padangan #s:focus, #cari-padangan #s:hover {
border: 2px solid #3AA0B9;
padding: 5px;
}
#cari-padangan #searchsubmit {
background: #286D80;
color: #fff;
position: absolute;
right: 2px;
bottom: 0;
padding: 3px;
border: 2px solid #1C4C5A;
border-top: 2px solid #93D1DD;
border-left: 2px solid #93D1DD;
}

#content-wrap {
float: left;
width: 762px;
}

#content {
margin: 0 450px 0 0;
}
.side1 {
width: 140px;
float: left;
margin-left: -430px;
}
.side2 {
width: 270px;
float: left;
margin-left: -270px;
}

#footer {
width: 750px;
bottom: 0px;
text-align: left;
}
#footer .right {
position: absolute;
right: 0;
text-align: right;
top: 0;
}
.rss {
background: url(images/ico/feed-icon-10x10.png) left center no-repeat;
padding-left: 12px;
}


#headr,#navr {
position: relative;
width: 750px;
margin: 0 auto;
}
.menu {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
right: 0;
bottom: -1px;
font-size: 1.2em;
font-weight: bold;
/* border-left: solid 1px #000; */
}
.menu li {
float: left;
position: relative;
text-align: center;
}
.menu li a{
padding: 2px 10px;
color: #6fba04; /*Kleur blank (groen) */
border-right: solid 1px transparent;
border-left: solid 1px transparent;
border-top: solid 1px transparent;
display: block;
}
.menu li a:hover{
color: #014f8f; /*Kleur roll over*/
border-right: solid 1px transparent;
border-left: solid 1px transparent;
border-top: solid 1px transparent;
}
.menu li.current_page_item a{
background: #004e8e;
color: ********; /*Kleur pagina (wit)*/
border-right: solid 1px #004e8e;
border-left: solid 1px #004e8e;
border-top: solid 1px #004e8e;
}

.post {
padding-bottom: 10px;
margin-bottom: 30px;
}

.post h2 {
font-size: 2.5em;
letter-spacing:-1px;
line-height:32px;
}
.post h2 a {
color: #E75C14;
}
.post h2 a:hover {
color: #E68D15;
}
.post ol, .post li, .archives ol, .archives li {
margin-left: 30px;
}
.wp-pagenavi {
margin-bottom: 20px;
}
.post h2 span {
color: #fff;

}
.post .entry a:link, .post .entry a:visited {
text-decoration: underline;
}
.post .entry a:hover {
text-decoration: none;
}

.post h2:hover span {
color: #000;
}
.postmetadata {
color: #666;
width: 100%;
position: relative;
padding-bottom: 25px;
}
.postmetadata a{
color: #666;
text-decoration: underline;
}
.postmetadata a:hover {
color: #000;
text-decoration: none;
}
.commr {
position: absolute;
right: 0;
bottom: 0;
}
.commr a:link, .commr a:visited {
background: #93D1DD;
padding: 2px 7px;
display: block;
color: #3AA0B9;
text-decoration: none;
}
.commr a:hover {
background: #000;
padding: 2px 7px;
display: block;
color: #fff;
text-decoration: none;
}

pre {
width: 98%;
overflow:auto;
font: 13px 'Courier New', Courier, Verdana, Arial, sans-serif;
color: #629E31;
max-height: 350px;
line-height: 18px;
margin: 10px 0;
border: 1px solid #A4BD2D;
padding: 5px;
background: #DEF6AF;
}

code, kbd {
font: 13px 'Courier New', Courier, Verdana, Arial, sans-serif;
color: #629E31;
padding: 2px;
}

.codesnip-container {
border:1px solid #A4BD2D; background:#A4BD2D; padding: 5px;margin:10px;
}
blockquote
{
background: url(images/blockquote.gif) no-repeat left top;
color: #666;
margin: 1em;
padding: 0 0 10px 50px;
}
.related ul {
margin-left: 20px;
}

.list-themes {
list-style: none;
margin: 0;
padding: 0;
}
.list-themes li{
float: left;
padding-right: 10px;
margin-bottom: 10px;
}
.list-themes li img{
border: 1px solid #ccc;
padding: 5px;
}

.side1 ul, .side2 ul {
list-style: none;
}
.side1 a, .side2 a {
color: #666;
}
.side1 a:hover, .side2 a:hover {
color: #286D80;
text-decoration: underline;
}
.side1 .gap {
margin: 0 0 0 10px;
}
.side2 .gap {
margin: 0 0 0 10px;
}
.gap2 {
margin-bottom: 10px;
}
.side1 .boxr, .side2 .boxr, .side1 .linkcat, .side2 .linkcat {
margin-bottom: 20px;
}
.side1 h2, .side2 h2 {
color: #3AA0B9;
border-bottom: 1px solid #E6B715;
margin-bottom: 10px;
font-size: 1.4em;
}
.box-ad {
margin: 0;
overflow: hidden;
padding: 0;
width: 95.5%;
font-size: 0.9em;
}

.box-ad li {
float: left;
margin: 0 0 3px 10px;
padding: 0;
display: inline;
}
.box-ad li a {
text-decoration: underline;
}
.box-ad img {
}

/* clearfix */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

.stats {
border-top: 1px solid #333;
border-bottom: 1px solid #333;
font-size: .9em;
color: #333;
}
.extra-footer {
width: 750px; /* Breedte footer */
margin-left: auto ; /* Align center */
margin-right: auto ; /* Align center */
padding: 10px 0px;
overflow: auto; /* Uitrollen images */
background: ******** url("images/bg/footer_bg.png") 0 top repeat-x;
}
.extra-footer2{
margin-top: 10px;
width: 100%;
float: left;

}
.extra-one {
width: 750px;
text-align: center;
margin: 0 auto;
}
.extra-one .inner {
width: 250px;
float: left;
}

.extra-one .inner h3, .extra-one h2 {
font-size: 12px;
margin: 0px;
color:#6fba04;
padding-bottom: 1px;
}

.extra-one .inner ul {
margin: 0px;
padding: 10px 0px 0px 0px;
}

.extra-one .inner li {
display: block;
color:#333;
margin: 0px;
padding: 2px 0px 3px;
list-style-type: none;
}
.extra-one .inner li a {
font-weight: normal;
color:#2E7E93;
}
.extra-one .inner li a:hover {
text-decoration: underline;
color: #000;
}

.info-rss {
background: #DEF6AF url(images/bg/bg-rssinfo.gif) no-repeat right top;
padding: 10px;
border: 1px solid #629E31;
}
.info-rss a {
color: #40760E;
font-size: 1.5em;
}

.navigation {
margin: 10px 0;
}
.navigation a
{
color: #666;
}
.navigation .alignleft
{
float: left;
width: 50%;
}
.navigation .alignright
{
float: right;
text-align: right;
width: 50%;
}
h2.pagetitle, h3#comments, h3#respond, h3.titles, .related h3 {
color: #3AA0B9;
border-bottom: 1px solid #E6B715;
margin-bottom: 10px;
}
.advertisement h3 {
border-bottom: 1px solid #ccc;
}
.advertisement a {
text-decoration: underline;
}
.advertisement a:hover {
text-decoration: none;
}

input#addcommentbutton {
background: #666;
border: 2px solid #999;
padding: 4px 10px;
color: #efefef;
border-right: 2px solid #333;
border-bottom: 2px solid #333;
}
input#addcommentbutton:hover, input#addcommentbutton:focus {
background: #333;
border: 2px solid #000;
padding: 4px 10px;
color: #fff;
border-right: 2px solid #666;
border-bottom: 2px solid #666;
}

#content .commentsfeedr
{
background: url(images/ico/feed.gif) no-repeat left center;
padding: 2px 0 2px 20px ;
}
#content .trackbackr
{
background: url(images/ico/arrow_refresh.png) no-repeat left center;
padding-left: 20px;
}
input.textbox, textarea
{
background: #fff url(images/shadow_top.gif) repeat-x top;
border: #ccc 1px solid;
font: 1em Verdana, Arial, Serif;
padding: 2px;
}
input.textbox:focus, textarea:focus
{
background: #fff url(images/shadow_top.gif) repeat-x top;
border: #999 1px solid;
}
textarea#comment {
width: 500px;
}

#submit, .do-comment, .cancel-comment
{
padding: 3px 5px;
}
#submit, .do-comment {
background: #40760E;
color: #fff;
border: 2px solid #345F0B;
border-top: 2px solid #4C8D11;
border-left: 2px solid #4C8D11;
margin-right: 10px;
}
input.cancel-comment {
background: #BC1431;
color: #fff;
border: 2px solid #8E0F25;
border-top: 2px solid #EC4A66;
border-left: 2px solid #EC4A66;
}
.comment
{
background: #fff url(images/shadow_top.gif) repeat-x top;
border-bottom: #ddd 1px solid;
list-style: none;
margin: 0;
padding: 1em 0.5em;
}
.alt
{
background: #f9f9f9;
}
.MyAvatars
{
border: 1px solid #ccc;
border-bottom: 1px solid #999;
border-right: 1px solid #999;
float: right;
margin-left: 5px;
margin-right: 10px;
padding: 3px;
}
.donate {
padding: 10px;
background: #efefef;
border: 1px solid #ccc;
}
.donate h3 {
margin: 0;
padding: 0;
border-bottom: 1px solid #ccc;
margin-bottom: 10px;
}
.donate p {
margin: 0;
padding:0;
}
.donate span {
float: right;
}

/* AdSense
********************* */
.ads726_link {
margin-bottom: 10px;
padding-bottom: 5px;
}
.ad-right {
float: right;
padding-left: 10px;
}
.ad-left {
float: left;
padding-right: 10px;
}
.ads726 {
float: right;
margin-top: 10px;
}
.ads468 {
text-align: center;
}
.review-me {
margin-top: 20px;
}

img.wp-smiley {
vertical-align: -25%;
}

iframe{
background-image:url(images/ajax-loader.gif);
background-repeat:no-repeat;
background-position:50% 50%;
}

.wbucks-300 {
margin-bottom: 20px;
}


.avatar {
float: right;
margin-left: 10px;
}
.trackbacklist {
margin-left: 20px;
}
.commentlist .children {
margin-left: 30px;
}


/* Begin Images */
p img {
padding: 0;
max-width: 100%;
}

/* Using 'class="alignright"' on an image will (who would've
thought?!) align the image to the right. And using 'class="centered',
will of course center the image. This is much better than using
align="center", being much more futureproof (and valid) */

img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}

img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}

img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}

.alignright {
float: right;
}

.alignleft {
float: left
}
/* End Images */

/* Captions */
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
}

.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}

.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
/* End captions */

/* Change Logs ****
1.0 : First Public Released
1.1 : Fix Widget Problem
1.2 : Fix Search Page
1.3 : Fix Navigation Bar
1.4 : Fix Images Post and compability with WordPress 2.6
1.5 : Add WP-Caption, Support Threaded Comment (WordPress 2.7), Fix Menu, and many more
*** */

Sidebar:

<div class="side1">
<div class="gap">
</div>
</div>

<div class="side2">
<ul class="box-ad clearfix">
<li><a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/ads/webhosting.png" border="0" alt="Webhosting" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/ads/domeinaam.png" border="0" alt="Domeinnaam" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/ads/vpshosting.png" border="0" alt="Vps hosting" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_directory'); ?>/images/ads/gameservers.png" border="0" alt="Gameservers" /></a></li>
</ul>

<div class="gap">
<ul>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('Sidebar Right Right') ) : else : ?>
<?php if(function_exists('buymebeer_sidebar')) { ?>
<li class="boxr">
<?php buymebeer_sidebar(); ?>
</li>
<?php } ?>

<li class="boxr">
<span class="tekst_kleur_bolt"><br />Nieuwsbrief</span><br />
<?php if (class_exists('ajaxNewsletter')): ?>
<?php ajaxNewsletter::newsletterForm(); ?>
<?php endif; ?>
</li>

<li class="boxr">
<span class="tekst_kleur_bolt">Klantenlogin</span><br />
Klikt u <a href="http://www.universal-isp.com:2222" target="_blank">hier</a> voor Isp control panel.<br />
Klikt u <a href="http://webmail.universal-isp.com/" target="_blank">hier</a> voor Webmail.<br />
Klikt u <a href="http://exchange.universal-isp.com" target="_blank">hier</a> voor Hosted Exchange.<br />
</li>

<?php endif; // End of Sidebar ?>
</ul>
</div>
</div>

Dankzij hulp is het gelukt om de website voor een aantal browsers werkend tekrijgen.
Op dit moment berijkbaar op http://dev.universal-isp.com.
voor ie werkt het menu nog niet goed hopelijk krijg ik dit opgelast en anders met hulp wel .
Met speciale dank aan GS2K1.

Iemand een id waarom het menu in ie niet boven de banner komt en in ff en de andere browsers wel ?

Als je nu eerst eens de fouten eruit haalt, vooraleer je je afvraagt waarom iets niet werkt zoals je verwacht.

Alle fouten zijn er nu uit maar binnen ie wordt het menu nog niet goed weer gegeven,
Iemand nu een id maby ?

Oorspronkelijk geplaatst door Mdaniels

...een id maby ?

Bedoel je misschien "een idee misschien"?

Welke IE? Want in IE 8 werkt hij naar behoren. Maak gewoon een een aparte stylesheet voor lte IE7 en zet de hardcoded goed.

Oorspronkelijk geplaatst door Mdaniels

Dankzij hulp is het gelukt. Met speciale dank aan GS2K1.

Arnold is een heel goede CSS'er...
Probeer nog wel je header iets minder hoog te maken, zodat bezoekers niet op elke pagina eerst naar beneden moeten scrollen. Dat vind ik persoonlijk nogal irritant.

Kleinigheidje:
In je prijzen gebruik je en € en EUR tegelijkt (€ 25.00 EUR)
Ik zou of de een of de ander doen en niet beide. (wel overal gelijkhouden in je site).

Bedankt voor al jullie tips, Ik ga hier rekening mee houden waneer ik verder aan ga werken.

Check ook ff je;
-ssl certificaat
-mouse over bij home/diensten/informatie/support/contact

Met hulp van GS2K1, is het menu probleem binnen ie opgelost.
Nu kan ik goed doorgaan met de rest van de website.

Graag gedaan.

Ik had inderdaad vrijdag, wegens tijdgebrek, nog wat Internet Explorer probleempjes niet verholpen. Ik het via PM's dit hopelijk nu opgelost.

Volgende keer ontwikkelen wij de gehele website?

Ik ben hier heelblij mee, Op dit moment werkt de layout in 99% van de browsers dit is echt top!. GS2K1 heeft verschillende style sheets gemaakt en die werken prima.
Ik wil hierbij GS2K1 nogmaals bedanken en hij kan binnen een paar dagen een kleinigheidje ontvangen van mijn kant af.