Hello,
When i change the size of my browser text (ctrl + scrollwheel) some parts of my site resize with it. The problem is i don't want it to resize. I can't find the bottleneck in my css.
i use this css on my submenu. i think the padding gains or decrease :
ul#submenu { border: 0px; list-style-type: none; margin: 0px; padding: 0px; }
ul#submenu a{ display: block; margin-left: 2px; margin-bottom: 2px; margin-right: 0px; margin-top: 0px; width: 196px; padding-left: 2px; }
li#sub_titel a:link, li#sub_titel a:visited { background-color: #EEEEEE; color: #2461AA; line-height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-decoration: none; }
li#sub_titel a:hover, li#sub_titel a:active { background-color: #DCE1E8; color: #2461AA; }
li#sub_titel span { margin-left: 2px; }
.sub_titel_sel{font-size: 10px; font-weight: bold; background-color: #DCE1E8; color: #2461AA; cursor: default; display: block; line-height: 32px; margin: 2px; margin-right: 0px; margin-top: 0px; width: 198px; }
li.sub_titel_sel span { margin-left: 4px;}
li#sub_normaal a:link, li#sub_normaal a:visited { background-color: #EEEEEE; color: #000000; line-height: 25px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; text-decoration: none; }
li#sub_normaal a:hover, li#sub_normaal a:active { background-color: #DCE1E8; color: #000000; }
li#sub_normaal span { margin-left: 5px; }
.sub_normaal_sel{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; background-color: #DCE1E8; color: #000000; cursor: default; display: block; line-height: 25px; margin: 2px; margin-right: 0px; margin-top: 0px; width: 198px; }
li.sub_normaal_sel span { margin-left: 7px; }
li#sub_klein a:link, li#sub_klein a:visited { font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #EEEEEE; color: #2461AA; line-height: 21px; font-size: 10px; font-weight: lighter; text-decoration: none; }
li#sub_klein a:hover, li#sub_klein a:active { background-color: #DCE1E8; color: #2461AA; }
li#sub_klein span { margin-left: 15px; }
.sub_klein_sel{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: lighter; background-color: #DCE1E8; color: #2461AA; cursor: default; display: block; line-height: 21px; margin: 2px; margin-right: 0px; margin-top: 0px; width: 198px; }
li.sub_klein_sel span { margin-left: 17px; }
and the following code do i use for my main menu. here the width between my items changes:
#nav {
border-left: 0px solid #2461AA;
border-right: 0px solid #2461AA;
border-top: 0px solid #2461AA;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
height: 30px;
left: 175px;
left: 176px; /* IE5.0/win */
left: 175px; /* */
margin: 0px;
padding: 15px 0px 0px 0px; /*background: #FFFFFF; */
position: absolute;
top: 40px;
white-space: nowrap;
}
#nav a:link, #nav a:visited {
color: #2461AA;
float: left;
font-size: 10px;
font-weight: bold;
line-height: 14px;
margin: 0px 4px 0px 8px;
padding-bottom: 6px;
text-decoration: none;
}
I hope on of you knows a solution for this problem.
Thanks in advance.could u post a link to the page in question?Two things are happening here:
1) You are using Internet Explorer-Win. IE-Win expands a box's width and/or height if the contents are too large. The CSS width: property in IE-Win acts more like the min-width, and height: acts more like min-height. Somewhere, the text size increase makes a word too wide to fit in its box, and IE-Win resizes the width to make it fit.
2) Your absolutely positioned navigation doesn't have a width specified. According to the W3C specs, abosolutely positioned elements are only as wide as the contents deem necessary. So again, when the text size increases, browsers should increase the width until the edges of the screen are touched. And IE-Win will do the same thing with this box as what's happening in number 1, above.
Other than that, we can't help you out until we either see the page, or see the HTML and CSS.well, i asked for the link cuz i dont really understand how it is happening, does the whole page width increase when u increase the text size?
shouldnt the text size be fixed(px)?i'm sorry i can't post an example, cause it's a site for a client and i don't think it's smart to post that site here
anyways it's a stupid IE(as far i can understand of your answers)... darn.
the problem is the sizes depend per item, so i can't set the width a fixed size.
i think it has to be something that i can live with.
thank you anywaysOriginally posted by LiLcRaZyFuZzY
... shouldn't the text size be fixed(px)?
That's the worst thing you can do to text. IE-Win users can't resize text, and let's not forget the 40 and older crowd that has increasingly poor close-up vision.
It's best to specify text size in the body tag as a %, then use html>body {} to specify the font size in em (Opera doesn't make text so small). Then use ems to size text in child elements of the body.
body { font-size: 80%; }
html>body { font-size: .8em; }
h3 { font-size: 1.2em; }
And sorry. Unless we can see the HTML and CSS, again, there's nothing we can do for you. Hopefully I pointed you in the right direction in my previous post. It's probably IE auto-expanding a box to contain contents that are too wide. We need more to go on. What parts resize? Can we get a screen shot? Anything.
When i change the size of my browser text (ctrl + scrollwheel) some parts of my site resize with it. The problem is i don't want it to resize. I can't find the bottleneck in my css.
i use this css on my submenu. i think the padding gains or decrease :
ul#submenu { border: 0px; list-style-type: none; margin: 0px; padding: 0px; }
ul#submenu a{ display: block; margin-left: 2px; margin-bottom: 2px; margin-right: 0px; margin-top: 0px; width: 196px; padding-left: 2px; }
li#sub_titel a:link, li#sub_titel a:visited { background-color: #EEEEEE; color: #2461AA; line-height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; text-decoration: none; }
li#sub_titel a:hover, li#sub_titel a:active { background-color: #DCE1E8; color: #2461AA; }
li#sub_titel span { margin-left: 2px; }
.sub_titel_sel{font-size: 10px; font-weight: bold; background-color: #DCE1E8; color: #2461AA; cursor: default; display: block; line-height: 32px; margin: 2px; margin-right: 0px; margin-top: 0px; width: 198px; }
li.sub_titel_sel span { margin-left: 4px;}
li#sub_normaal a:link, li#sub_normaal a:visited { background-color: #EEEEEE; color: #000000; line-height: 25px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; text-decoration: none; }
li#sub_normaal a:hover, li#sub_normaal a:active { background-color: #DCE1E8; color: #000000; }
li#sub_normaal span { margin-left: 5px; }
.sub_normaal_sel{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: normal; background-color: #DCE1E8; color: #000000; cursor: default; display: block; line-height: 25px; margin: 2px; margin-right: 0px; margin-top: 0px; width: 198px; }
li.sub_normaal_sel span { margin-left: 7px; }
li#sub_klein a:link, li#sub_klein a:visited { font-family: Verdana, Arial, Helvetica, sans-serif; background-color: #EEEEEE; color: #2461AA; line-height: 21px; font-size: 10px; font-weight: lighter; text-decoration: none; }
li#sub_klein a:hover, li#sub_klein a:active { background-color: #DCE1E8; color: #2461AA; }
li#sub_klein span { margin-left: 15px; }
.sub_klein_sel{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: lighter; background-color: #DCE1E8; color: #2461AA; cursor: default; display: block; line-height: 21px; margin: 2px; margin-right: 0px; margin-top: 0px; width: 198px; }
li.sub_klein_sel span { margin-left: 17px; }
and the following code do i use for my main menu. here the width between my items changes:
#nav {
border-left: 0px solid #2461AA;
border-right: 0px solid #2461AA;
border-top: 0px solid #2461AA;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
height: 30px;
left: 175px;
left: 176px; /* IE5.0/win */
left: 175px; /* */
margin: 0px;
padding: 15px 0px 0px 0px; /*background: #FFFFFF; */
position: absolute;
top: 40px;
white-space: nowrap;
}
#nav a:link, #nav a:visited {
color: #2461AA;
float: left;
font-size: 10px;
font-weight: bold;
line-height: 14px;
margin: 0px 4px 0px 8px;
padding-bottom: 6px;
text-decoration: none;
}
I hope on of you knows a solution for this problem.
Thanks in advance.could u post a link to the page in question?Two things are happening here:
1) You are using Internet Explorer-Win. IE-Win expands a box's width and/or height if the contents are too large. The CSS width: property in IE-Win acts more like the min-width, and height: acts more like min-height. Somewhere, the text size increase makes a word too wide to fit in its box, and IE-Win resizes the width to make it fit.
2) Your absolutely positioned navigation doesn't have a width specified. According to the W3C specs, abosolutely positioned elements are only as wide as the contents deem necessary. So again, when the text size increases, browsers should increase the width until the edges of the screen are touched. And IE-Win will do the same thing with this box as what's happening in number 1, above.
Other than that, we can't help you out until we either see the page, or see the HTML and CSS.well, i asked for the link cuz i dont really understand how it is happening, does the whole page width increase when u increase the text size?
shouldnt the text size be fixed(px)?i'm sorry i can't post an example, cause it's a site for a client and i don't think it's smart to post that site here
anyways it's a stupid IE(as far i can understand of your answers)... darn.
the problem is the sizes depend per item, so i can't set the width a fixed size.
i think it has to be something that i can live with.
thank you anywaysOriginally posted by LiLcRaZyFuZzY
... shouldn't the text size be fixed(px)?
That's the worst thing you can do to text. IE-Win users can't resize text, and let's not forget the 40 and older crowd that has increasingly poor close-up vision.
It's best to specify text size in the body tag as a %, then use html>body {} to specify the font size in em (Opera doesn't make text so small). Then use ems to size text in child elements of the body.
body { font-size: 80%; }
html>body { font-size: .8em; }
h3 { font-size: 1.2em; }
And sorry. Unless we can see the HTML and CSS, again, there's nothing we can do for you. Hopefully I pointed you in the right direction in my previous post. It's probably IE auto-expanding a box to contain contents that are too wide. We need more to go on. What parts resize? Can we get a screen shot? Anything.