Beiträge von Mathias_Bauer

Mathias_Bauer

Gut, wenn der Zoom egal ist, dann bleibt alles so wie es ist.

Vielen Dank!

Mathias_Bauer

Das mit dem mehr Platz kann hoffentlich nicht die Lösung sein.
Dann wäre ich dem Problem ja hilflos ausgeliefert!

Mathias_Bauer

Das was nicht funktioniert???

Bei der Seite, auf der es funktioniert, wird das div mit größer, so dass der Text nicht über den Rand hinausgeht.

Ich teste das auch mit Firefox.

Mathias_Bauer

Also eigentlich habe ich alles in px angegeben. Hab ich an der einen Stelle bestimmt vergessen. Ich glaube aber nicht, dass es an der Maßeinheit liegt...

Ich habe die rechten divs mit der Eigenschaft right ausgerichtet. D.h. das Verhalten ist schon logisch. Ich möchte aber nicht mit festen Angaben oder Prozentualwerten arbeiten, da je nach Auflösung die Seite dann anders angezeigt wird. Nur die Zoom-Funktion des Browsers habe ich eben nicht berücksichtigt...
Um diesen Missstand zu beheben, ist es die einzige Möglichkeit mit festen Angaben zu arbeiten?

Mathias_Bauer

Der Link oben war wahrscheinlich nicht auffällig genug...

Hier nochmal der Link wo es nicht geht: http://pferd-rhein-ruhr.de/index.php?page…er&group=1#oben

Und hier ein Link wo es geht: http://www.tischtennis-gross-zimmern.de/

Mathias_Bauer

Nein, ich glaube da liegt ein Missverständnis vor.
Ich möchte keine Zoom-Funktion. Ich habe das Problem, wenn ich mit der Browserfunktion zoome, dann werden die Divs nicht größer, sondern nur der Text und die anderen Elemente. Irgendwann gehen die dann über den Div-Rand hinaus.
D.h. die Css-Einstellungen meiner Seite stimmen nicht! Wenn ich andere Webseiten zoome, dann wird alles gleichmäßig größer.

Mathias_Bauer

Hallo,

ich habe folgendes Problem:

Wenn ich im Browser die Seite größer zoome, dann wachsen die divs nicht mit sondern eben nur der Text und die anderen Elemente.

Was kann ich am einfachsten ändern, um nicht das ganze Design ändern zu müssen?

Hier der Link zu einer Seite, die am schlimmsten betroffen ist.

Nachfolgend das zugehörige css für den Firefox.
Ich denke, dass #pagecell1, .feature und .content die entscheidenden Eigenschaften enthalten.

Vielen Dank im Voraus!

Code

/***********************************************/
/* emx_nav_left.css                            */
/* Use with template Halo_leftNav.html         */
/***********************************************/


/***********************************************/
/* HTML tag styles                             */
/***********************************************/
body{
    font-family: Arial,sans-serif;
    color: #333333;
    line-height: 1.166;
    margin: 0px;
    padding: 0px;
    background: #cccccc url("bg_grad2.jpg") fixed;
}




/******* hyperlink and anchor tag styles *******/


a:link, a:visited{
    color: #005FA9;
    text-decoration: none;
}


a:hover{
    text-decoration: underline;
}




/************** header tag styles **************/


h1{
 font: bold 150% Arial,sans-serif;
 color: #006699;
 margin: 0px;
 padding: 0px 10px 10px 0px;
}


h2{
 font: bold 114% Arial,sans-serif;
 color: #006699;
 margin: 0px;
 padding: 0px;
}


#ueber{
font: bold 175% Arial,sans-serif;
    float:left;
    color: #000000;
    margin-top:4px;
    padding: 0px;
    width:168px;
}


#ueber2{
 font: bold 200% Arial,sans-serif;
 color: #006699;
 margin-top: -4px;
 padding:0px;
}


h3{
 font: bold 100% Arial,sans-serif;
 color: #006699;
 margin: 0px;
 padding: 0px;
}


h4{
 font: bold 100% Arial,sans-serif;
 color: #006699;
 margin: 0px;
  padding: 0px 10px 10px 0px;
}


h5{
 font: 100% Arial,sans-serif;
 color: #006699;
 margin: 0px;
 padding: 0px;
}


h6{
 font: bold 150% Arial,sans-serif;
color: #006699;
 margin: 0px;
 padding: 0px;
}


h7{
 font: bold italic 100% Arial,sans-serif;
  color: #006699;
 margin: 0px;
 padding: 0px;
}




/*************** list tag styles ***************/


ul{
 list-style-type: square;
}


ul ul{
 list-style-type: disc;
}


ul ul ul{
 list-style-type: none;
}


/********* form and related tag styles *********/
form {
    margin: 0px;
    padding: 0px;
}


label{
 font: bold 1em Arial,sans-serif;
 color: #334d55;
}


input{
font-family: Arial,sans-serif;
text-align:center;
}


/***********************************************/
/* Layout Divs                                 */
/***********************************************/
#pagecell1{
    position:absolute;
    top: 163px;
    left: 2%;
    right: 2%;
    width:95.6%;
    background-color: #ffffff;
}


#tl {
    position:absolute;
    top: -1px;
    left: -1px;
    margin: 0px;
    padding: 0px;
    z-index: 100;
}


#tr {
    position:absolute;
    top: -1px;
    right: -1px;
    margin: 0px;
    padding: 0px;
    z-index: 100;
}


#trPrint {
    position:absolute;
    top: -1px;
    right: 10px;
    margin: 0px;
    padding: 0px;
    z-index: 100;
}


#trPrintAusstellerInfo {
    position:absolute;
    top: 30px;
    right: 10px;
    margin: 0px;
    padding: 0px;
    z-index: 100;
}






#masthead{
    position: absolute;
    top: 0px;
    left: 2%;
    right: 2%;
    width:95.6%;
}


#mastheadcenter{
    position: absolute;
    font: 75% Verdana,sans-serif;
    top: 16px;
    color: #FFFFFF;
    left:40%;
    z-index:2;
}




#pageNav{
    float: left;
    width:178px;
    margin:0px;
    height: auto;
    padding: 0px;
    background-color: #F5f7f7;
/*    border-bottom: 1px solid #cccccc;*/
    font: small Verdana,sans-serif;


}


#content{
    position:relative;
    padding: 10px 10px 0px 0px;
    margin:0px 0px 0px 178px;
    border-left:1px solid #cccccc;
    min-height: 100px;
    height: auto;
    width:auto;
    z-index:1;
}




/***********************************************/
/* Component Divs                              */
/***********************************************/
#siteName{
    font: bold 120% Arial,sans-serif;
    margin: 0px;
    padding: 16px 0px 8px 0px;
    color: #ffffff;
    font-weight: normal;
}


/************** utility styles *****************/


#utility{
    font: 75% Verdana,sans-serif;
    position: absolute;
    top: 16px;
    right: 0px;
    color: #919999;
}


#utility a{
    color: #ffffff;
}


#utility a:hover{
    text-decoration: underline;
}


/************** pageName styles ****************/


#pageName{
    padding: 0px 0px 14px 10px;
    margin: 0px;
    border-bottom:1px solid #ccd2d2;
}


#pageName h2{
    font: bold 175% Arial,sans-serif;
    color: #000000;
    margin:0px;
    padding: 0px;
}


#pageName img{
    position: absolute;
    top: 0px;
    right: 6px;
    padding: 0px;
    margin: 0px;
}


/************* globalNav styles ****************/


#globalNav{
position: relative;
width: 100%;
min-width: 640px;
height: 96px;
color: #cccccc;
padding: 0px;
margin: 0px;
background: #FFFFFF;
/*background-image:  url("glbnav_background.gif");*/
}


#globalNav img{
    margin-bottom: -4px;


}


#gnl {
    position: absolute;
    top: -1px;
    left:-1px;


}


#gnr {
    position: absolute;
    top: -1px;
    right:-1px;
}


#gnld {
    position: absolute;
    bottom: 3px;
    left:-1px;
    z-index:600;
}


#gnrd {
    position: absolute;
    bottom: 3px;
    right:-1px;
}


#globalLink{
    position: absolute;
    top: 6px;
    height: 90px;
    min-width: 100px;
    padding: 0px;
/*    margin: 0px;
    left: 0px;*/
    z-index: 100;
    margin-top: auto;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;


}
#globalLinkRight{
    position: absolute;
    top: 3px;
    height: 90px;
    width: 964px;
    min-width: 964px;
    padding: 0px;
/*    margin: 0px;
    left: 20px;*/
    z-index:200;
top: 50%;
left: 50%;
margin-top: -45px;
margin-left: -482px;


}




#logoRechts{
    position: absolute;
    top: 6px;
    height: 90px;
    width:100px;
    min-width: 100px;
    padding: 0px;
/*    margin: 0px;
    left: 845px;*/
    z-index: 300;
top: 100%;
left: 100%;
margin-top: -90px;
margin-left: -120px;


}




a.glink, a.glink:visited{
      font-size: small;
      color: #000000;
    font-weight: bold;
    margin: 0px;
    padding: 2px 5px 4px 5px;
    border-right: 1px solid #8FB8BC;
}


a.glink:hover{
      background-image:  url("glblnav_selected.gif");
    text-decoration: none;
}


.skipLinks {display: none;}


/************ subglobalNav styles **************/


.subglobalNav{
    position: absolute;
    top: 84px;
    left: 0px;
    /*width: 100%;*/
    min-width: 640px;
    height: 20px;
    padding: 0px 0px 0px 10px;
    visibility: hidden;
    color: #ffffff;
}


.subglobalNav a:link, .subglobalNav a:visited {
    font-size: 80%;
    color: #ffffff;
}


.subglobalNav a:hover{
    color: #cccccc;
}


/*************** search styles *****************/


#search{
    position: absolute;
    top: 5px;
    right: 10px;
    z-index: 101;
}


#search input{
  font-size: 70%;
  margin: 0px  0px 0px 10px;
 }


#search a:link, #search a:visited {
    font-size: 80%;
    font-weight: bold;


}


#search a:hover{
    margin: 0px;
}




/************* breadCrumb styles ***************/


#breadCrumb{
    padding: 5px 0px 5px 10px;
    font: small Verdana,sans-serif;
    color: #AAAAAA;
}


#breadCrumb a{
    color: #AAAAAA;
}


#breadCrumb a:hover{
    color: #005FA9;
    text-decoration: underline;
}




/************** feature styles *****************/


.werbung{
    position: absolute;
    right:5px;
    top: 10px;
    min-height: 450px;
    height: auto;
}




.feature{
    position:relative;
    width: 99%;
    padding: 0px 10px 10px 10px;
    font-size: 80%;
    margin:0px;
    min-height: 450px;
    height: auto;
    z-index:1;
}




html>body .feature {height: auto;}




.feature h3{
    font: bold 175% Arial,sans-serif;
    color: #000000;
    padding: 30px 0px 5px 0px;
}


.feature2 a{
    text-decoration:none;
    color:#000000;
}


.feature2 a:visited{
    text-decoration:none;
    color:#000000;
}


.feature a{
    text-decoration:none;
    color:#000000;
}


.feature a:visited{
    text-decoration:none;
    color:#000000;
}


.feature a:hover{
    text-decoration:underline;
}


.featurehotels a{
    text-decoration:underline;
}


.featurehotels a:visited{
    text-decoration:underline;
}


.featurehotels a:hover{
    text-decoration:underline;
}


.featurehotels{
    position:relative;
    width: 99%;
    padding: 0px 10px 10px 10px;
    font-size: 80%;
    margin:0px;
    min-height: 450px;
    height: auto;
}


table.ausstellerinfo{
   width: 70%;
}








#tag1hin{
border:1px solid #000000;
padding: 10px 0px 5px 10px;
background: #cccccc;
width:50%;
}


#tag1rueck{
border:1px solid #000000;
padding: 10px 0px 5px 10px;
background: #cccccc;
width:50%;
}


#tag2hin{
border:1px solid #000000;
padding: 10px 0px 5px 10px;
background: #cccccc;
width:50%;
}


#tag2rueck{
border:1px solid #000000;
padding: 10px 0px 5px 10px;
background: #cccccc;
width:50%;
}


#tag3hin{
border:1px solid #000000;
padding: 10px 0px 5px 10px;
background: #cccccc;
width:50%;
}


#tag3rueck{
border:1px solid #000000;
padding: 10px 0px 5px 10px;
background: #cccccc;
width:50%;
}


#tag4hin{
border:1px solid #000000;
padding: 10px 0px 5px 10px;
background: #cccccc;
width:50%;
}


#tag4rueck{
border:1px solid #000000;
padding: 10px 0px 5px 10px;
background: #cccccc;
width:50%;
}


/*************** story styles ******************/


#rechnung {
    display:none;
    padding: 20px 0px 0px 0px;
/*    font-size: 80%;*/
}


#korrespondenz {
    display:none;
    padding: 20px 0px 0px 0px;
/*    font-size: 80%;*/
}


#mitaussteller1 {
    display:none;
    padding: 20px 0px 0px 0px;
}


#mitaussteller2 {
    display:none;
    padding: 20px 0px 0px 0px;
}


#mitaussteller3 {
    display:none;
    padding: 20px 0px 0px 0px;
}


#mitaussteller4 {
    display:none;
    padding: 20px 0px 0px 0px;
}


#mitaussteller5 {
    display:none;
    padding: 20px 0px 0px 0px;
}


#absenden {
    padding: 20px 0px 0px 0px;
}




.story h3{
    font: bold 125% Arial,sans-serif;
    color: #000000;
}


.story p {
    padding: 0px 0px 10px 0px;
}


.story a.capsule{
    font: bold 1em Arial,sans-serif;
    color: #005FA9;
    display:block;
    padding-bottom: 5px;
}


.story a.capsule:hover{
    text-decoration: underline;
}


td.storyLeft{
    padding-right: 12px;
}




/************** siteInfo styles ****************/


#siteInfo{
    clear: both;
    border-top: 1px solid #cccccc;
    font-size: small;
    color: #006699;
    background: #FFFFFF;
    padding: 10px 10px 10px 0px;
    margin-top: 0px;
    width:auto;
    left:0px;
    right:0px;
    z-index:100;
}


#siteInfo img{
    padding: 4px 4px 4px 0px;
    vertical-align: middle;


}




/************ sectionLinks styles **************/


.sectionLinks{
    margin: 0px;
    padding: 0px;




}


.sectionLinks h3{
    padding: 10px 0px 2px 10px;
    border-bottom: 1px solid #cccccc;
}


.sectionLinks a:link, .sectionLinks a:visited {
    display: block;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #cccccc;


    background-image:  url("bg_nav.jpg");
    font-weight: bold;
    padding: 3px 0px 3px 10px;
    color: #21536A;
}


.sectionLinks2{
    margin: 0px;
    padding: 0px;


}


.sectionLinks2 h3{
    padding: 10px 0px 2px 10px;
    border-bottom: 1px solid #cccccc;
}


.sectionLinks2 a:link, .sectionLinks2 a:visited {
    display: block;


    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #cccccc;
    background-image:  url("bg_nav.jpg");
    font-weight: bold;
    padding: 3px 0px 3px 10px;
    color: #21536A;
}




.selectedRightLinks a:link, .selectedRightLinks a:visited {
    display: block;


    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #cccccc;
    background-image:  url("bg_nav.jpg");
    font-weight: bold;
    font-size: smaller;
    padding: 3px 0px 3px 25px;
    color: #21536A;
}


.selectedRightLinks a:hover{


    border-top: 1px solid #cccccc;
    background-color: #DDEEFF;
    background-image: none;
    font-weight: bold;
    text-decoration: none;
}


.selectedRight{


    display: block;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #cccccc;
    background-image:  url("bg_nav.jpg");
    font-weight: bold;
    font-size: smaller;
    padding: 3px 0px 3px 25px;
    color: #FF0000;
}


.selectedLinks{


    display: block;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #cccccc;
    background-image:  url("bg_nav.jpg");
    font-weight: bold;
    padding: 3px 0px 3px 10px;
    color: #FF0000;
}


.sectionLinks a:hover{


    border-top: 1px solid #cccccc;
    background-color: #DDEEFF;
    background-image: none;
    font-weight: bold;
    text-decoration: none;
}


.sectionLinks2 a:hover{


    border-top: 1px solid #cccccc;
    background-color: #DDEEFF;
    background-image: none;
    font-weight: bold;
    text-decoration: none;
}


.selectedRightLinksProgram a:link, #selectedRightLinksProgram a:visited {
    display: block;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #cccccc;
    background-image:  url("bg_nav.jpg");
    font-weight: bold;
    font-size: smaller;
    padding: 3px 0px 3px 40px;
    color: #21536A;
}


.selectedRightLinksProgram a:hover{


    border-top: 1px solid #cccccc;
    background-color: #DDEEFF;
    background-image: none;
    font-weight: bold;
    text-decoration: none;
}


.selectedRightProgram{


    display: block;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #cccccc;
    background-image:  url("bg_nav.jpg");
    font-weight: bold;
    font-size: smaller;
    padding: 3px 0px 3px 40px;
    color: #FF0000;
}




/************* relatedLinks styles **************/


.relatedLinks{
    margin: 0px;
    padding: 0px 0px 10px 10px;
    border-bottom: 1px solid #cccccc;
}


.relatedLinks h3{
    padding: 10px 0px 2px 0px;
}


.relatedLinks a{
    display: block;
}




/**************** advert styles *****************/


#advert{
    padding: 20px;
    background: #FFFFFF;




}


#advert a{
    text-decorartion: none;
    color: #000000;
}


#advert a:visited{
    text-decorartion: none;
    color: #000000;
}


#advert img{
    text-decoration:none;
}


#advert2{
    padding: 20px;
    background: #FFFFFF;




}


#advert2 a{
    text-decorartion: none;
    color: #000000;
}


#advert2 a:visited{
    text-decorartion: none;
    color: #000000;
}


#advert2 a:hover{
    z-index:99;
    text-decorartion: none;
    color: #000000;
}


#advert2 img{
    text-decoration:none;
}










/********************* end **********************/

Alles anzeigen

Mathias_Bauer

Das ist für mich aber nicht befriedigend. Ich weiß, ich kann mit Browsernweichen getrennte angaben für einzelne Browsern machen, aber was mag der IE 6 denn nicht?

Mathias_Bauer

Okay, ich habe die Fehler bereinigt.

Jedoch sieht die Seite in den Browsern immer noch unterschiedlich aus.

Mathias_Bauer

Hallo,

ich finde leider nicht den Fehler, warum meine Seite in den Browsern IE 6, IE 7 und Firefox unterschiedlich aussehen. Wenn mir jemand helfen könnte, wäre ich sehr dankbar.

Der Link zur Seite:

http://www.pferd-rhein-ruhr.de/anmeldung.php?start=0

Der Link zur CSS-Datei:

http://www.pferd-rhein-ruhr.de/styles/emx_nav_left.css

Vielen Dank im Voraus.

Gruß

Mathias

Beiträge von Mathias_Bauer

Browser Zoom - Divs vergrößern sich nicht

Browser Zoom - Divs vergrößern sich nicht

Browser Zoom - Divs vergrößern sich nicht

Browser Zoom - Divs vergrößern sich nicht

Browser Zoom - Divs vergrößern sich nicht

Browser Zoom - Divs vergrößern sich nicht

Browser Zoom - Divs vergrößern sich nicht

unterschiedliches Aussehen IE 6 + IE 7 + FF

unterschiedliches Aussehen IE 6 + IE 7 + FF

unterschiedliches Aussehen IE 6 + IE 7 + FF