[css-d] Web Pages Shift
I have spent quite a bit of time trying to figure out why certain pages shift when loaded (or center differently) than others on this website. These two are very representative of the problem. http://www.broadstonere.com/about/brandon_tones.php and http://www.broadstonere.com/about/people.php Any help would be very appreciated. Thank you, Patrice __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Web Pages Shift
Bob,
I am indebted to you for this bit of information! Thank you. It solved
the problem so easily that I am amazed. I had never heard of this, but
googled it to see what it was.
I dropped some code onto the bottom of my css sheet without really
understanding where to put it or format it, but it doesn't seem to
matter, it works.
html, body { height: 100%; margin: 0 0 1px; padding: 0; }
But I will do a bit of research to discover what this is all about.
Thank you,
Patrice Lockhart
Try setting up a permanent vertical scroller. Compare the difference
with those that have and those that have not. -Bob
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] I must be a moron, How to reply to messages
Al, I have used Thunderbird for a long time and never noticed this button until you pointed it out. It's amazing that it has been sitting there right next to reply all this time and I didn't see it? Gosh, I could kiss you for this little tidbit. Thank you Patrice On 10/18/2011 10:03 AM, css-d-requ...@lists.css-discuss.org wrote: If you use a client like Thunderbird, there is a convenient "Reply List" button:-) __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Text Size Smaller Than CSS Indicates?
My client has a number of property pages. I have just added flash slide shows to the banner area. I did not change anything in the CSS to do this and the CSS remains the same for all property pages as before. However, on one page, the text appears to have changed to a smaller font than called for in the CSS when I uploaded the slideshow to the server: font-family: Trebuchet MS, sans-serif; font-size: 14px; I have compared all the property pages and the rest are fine. The original page was a test page and all I did to put it up live was remove the _test from the file name and point it to the .xml slide page. http://www.broadstonere.com/properties/piano_works.php Thank you, Patrice __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS Gradient That Works With IE?
I am in the process of refreshing an older website. I am trying to make only moderate changes to avoid breaking some of the pages that have unique elements. The basic page has a 968px wide topContainer and container. I can style them more or less separately from each other. The container is styled with a full width 968 x 1px background gif image that creates a left 200px solid green sidebar (through repeating) in the company color and a white background on the right for the content area. I have put an HTML5 accordion menu in the topContainer with a green background. As the user opens and closes the menu, it slides seamlessly up and down the container sidebar and looks rather nice. I have not completely finished styling this. I would like to make this sidebar a bit more interesting by adding a bit of a gradient below where the menu's deepest position is. I immediately realized that using a 968 x 1px gif was not going to work because the the height of the container is variable depending on the content. I have two choices: One: make the container the depth of the deepest page, lock it to that height and make another gif background with a gradient and use it full height and width. Some pages that have a small amount of content are going to look horribly unbalanced. I would say that about 1/3 of the site's pages are like this. One page has a flash google mapping program that will look very unbalanced if I take this approach. However, I do need to have the shorter pages a bit deeper to accommodate the sidebar accordion menu at it's full length. I don't think the container div responds to changes in the topContainer element's depths? Two: use css to create a gradient in a newly created 200px wide sidebar in the container div. I have found a website that helps the user create a CSS3 gradient and provides the code. However, it looks like IE doesn't do well with this and in fact they provide "if IE then" code that seems to reduce the gradient to a solid color. Unfortunately my client uses only IE on their desktop. There is no chance that they would consider any other. Is there another way to accomplish a variable page height gradient using CSS that would work with IE? If you have seen a page that does this, a link to the page would help me study how it is done. Here is my test page (which will be in a constant state of change and the junk at the bottom is a goner). http://www.broadstonere.com/index_test_4.php Thank you, Patrice __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Gradient That Works With IE?
On Sun, 29 Jan 2012, Ghodmode wrote: IE supports gradients through the non-standard CSS property "filter": http://msdn.microsoft.com/en-us/library/ms533754.aspx Here's an example that should work for you cross-browser: background-color: #3D6554; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#3d6554', EndColorStr='white'); background-image: -webkit-gradient(linear, left top, left bottom, from(#3d6554), to(white)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, #3d6554, white); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image:-moz-linear-gradient(top, #3d6554, white); /* FF3.6 */ background-image: -ms-linear-gradient(top, #3d6554, white); /* IE10 */ background-image: -o-linear-gradient(top, #3d6554, white); /* Opera 11.10+ */ background-image: linear-gradient(to bottom, #3d6554, white); */ Vince, This is amazing! Thank you for your help with this. It works fantastic! And also thank you for the help with placing it in the container div, your suggestion was clearly the easier way to approach this. This really can replace most .gif files that are being used as backgrounds in a cross-browser friendly way. I will explore this for a webpage background also. I am getting closer to adding the final touches on the page. Next, I need to get rid of some of the text on the page, too many words http://www.broadstonere.com/index_test_3.php my best patrice __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] media queries issues
John, I think you need another media query in your css style sheet, you only have two, you probably need three: desktop, tablet and mobile. Using firebug, select your wrapper div and view Layout. Drag your screen slowly to the left to find the first "breakpoint" where your styling for desktop starts to fall apart (to your liking). Jot that width value down. Continue to drag slowly to the left until you find the next breakpoint that bothers you where the tablet styling falls apart. Jot that down. Repeat to find the breakpoint where you think your mobile styling fails. Write your desktop media query with a min-width and max-width. Set your tablet the same way (but one px less than the min-width for the desktop). Repeat for the mobile. I played with your example page and came up with my own arbitrary values of 865-960 (the page background white framing disappeared), 461-864 (the menu broke) and 371-460. However adding in content really can change that. Add an image or style your menu a bit more and see where those breakpoints will be. Set image widths with percentages. The images should be managed for smaller screens, to the best of your ability, by either cropping to make a smaller file or saved for web at a smaller size. And some images might just need to be dropped for the mobile, avoid loading a large image to mobile for now if you can. The width of paragraph text can also help you decide. When you start getting paragraphs that are less than 3-4 words across it is probably time to get rid of the sidebar completely (as in mobile) and stack it below the section. That might mean making your section the full width of the mobile screen and styling it a bit differently. And of course putting in a different font can change it all too! It hasn't been as easy as it first appeared to me, each screen size really needs to be planned out and styled appropriately. But I found that utilizing some standard styling between all three screens keeps the job a bit simpler. But still, for me, it has been a bit of styling then checking breakpoints, then altering styling etc. my best patrice On 8/29/2013 6:50 PM, css-d-requ...@lists.css-discuss.org wrote: I am trying to get solid on basic media queries with the simple site, link below. When narrow the viewport to "tablet" which I have set at max-width:768px, the desktop styles vanish, but tablet styles don't take their place. I've been wracking my brain over this and I am not seeing the problem. Any suggestions? Thank you in advance! John http://coffeeonmars.com/new/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Remove a:hover Background-color: Images
I inherited a website and am trying to sort through a lengthy (but
probably well written) css style sheet for about 6 months. So far I have
been able to solve most problems on my own.
*I need help with a specific site-wide problem and ideally would like a
global css solution.*
There is text decoration on the a:hover that puts a background color
green under the text and changes the text to white. It looks fine and I
do not need to change that.
a{ color: #396552; text-decoration: none;}
a:visited{ color: #396552; text-decoration: none;}
a:hover {
color: #FFF;
background-color: #3D6554;
}
However, on all images with href (including the corporate icon image on
every page) *the a:hover obviously causes a green bar to show up under
all images.*
In Firefox it is there, but not bothersome. In IE, it is causing a
vertical page shift.
Removing the a:hover from the style sheet negatively affects all green
text on a white background when hovering and is an integral design of
the website.
*I would like to add a global item to the style sheet that removes the
text decoration for a:hover on all images.*
My internet searches have found multiple "solutions" and none of them
seem straightforward. I think the answer maybe something like this:
.aimg:hover
and setting it to no text decoration. But this does require applying it
to every icon, every image on many pages.
I would like to post a url, but I am unsure if I can post a client's
private url on this forum, there is nothing in the List Policies about this.
Thank you for your help,
Matoca
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Remove a:hover Background-color: Images
Christian,
What are the rules regarding posting a link to a client's website on
this forum? I would like to post it, but I am unsure about that.
This is the code for the top icon "logo" element on the top left page
and the title on the top right page. This is happening on every page.
(It is also happening to images used in a lightbox2 javascript in some
pages but fixing this problem with the icon would help immensely)
These styles apply to this:
body {
margin: 0px;
text-align: center;
background-image: url(../img/bodybg.jpg);
background-color: #C8C8A2;
background-repeat: repeat-x;
font-family:Trebuchet MS, sans-serif;
font-size: 14px;
line-height:20px;
}
#topcontainer {
width: 968px;
text-align: left;
margin: 0px auto;
border: 0px;
}
a { color: #396552; text-decoration: none;}
a:visited { color: #396552; text-decoration: none;}
a:hover {
color: #FFF;
background-color: #3D6554;
}
I wish I understood this better but I have reached a point where I am
tripping over the CSS and drawing a blank. I can usually figure things
out with brute force and experimenting. The more I experiment with this
the less I understand. I even tried to just remove the background color
from the a:hover. But then on other pages (where this also applies) the
email links text color turned to white when hovered and the text just
disappeared into the white background! So this bg color on the a:hover
has to stay.
When you ask if there is padding, margin, line-height etc. set to the
the or does border="0" style="margin-left: -8px;" indicate
this? What would I alter in this?
Thanks
Matoca
> if the anchor element containing the image would be exactly as big as
> the image, and the image's position would not be offset in any way, then
> there shouldn't be any green backfround color visible.
>
> Is there a padding set to elements, or a margin to elements,
> or line-height or anything else?
>
> Is there a link to the website to take a closer look at the problem?
>
> Best regards,
>
> Christian
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Remove a:hover Background-color: Images
Thank you for all your suggestions and help. I was contacted by a member
who had an excellent suggestion that worked very well.
text link
a:hover {background: red; color: white;}
a.any_image_links:hover {background: transparent; color: green;}
I applied the class to the icon image and it resolved the problem.
Dreamweaver doesn't display it correctly in the design view (shifting
the icon from the left to the center of the page), but it looks correct
in several browsers.
This is not my personal site, but a clients, so that is why I am
hesitating to post the link. As I stay on this forum longer I will get a
better idea of the pluses and minuses of posting this kind of url.
Matoca
> Usually people put a link to the problematig page or site and a link to
> the css file (if it is a single file).
>
> So feel free to post that link, it will help everybody to analyze your
> problem and maybe find a solution.
>
> Best regards,
>
> Christian
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Remove a:hover Background-color: Images
>> text link
a:hover {background: red; color: white;}
a.any_image_links:hover {background: transparent; color: green;}
>>I applied the class to the icon image and it resolved the problem.
>> Dreamweaver doesn't display it correctly in the design view
>> (shifting the icon from the left to the center of the page), but it
>> looks correct in several browsers.
> But then Dreamweaver isn't a web browser and it's design view should
> only be used to get a vague impression of how it might look in an
> actual browser.
>
> -- Ed Seedhouse
In fact I discovered this to be a style sheet problem that showed up on
the website as well. I compared the style sheet line by line with the
older version after applying class="my_image_links" until I found
something missing.
When I applied the class to the icon inside the div #topcontainer, DW
deleted the "text-align: left;" without my knowledge. I tried this
several times and it repeated it each time. I added the property
text-align back to the #topcontainer and saved it. After doing this the
icon was back to screen left on both the website and in DW design view.
#topcontainer {
width: 968px;
margin: 0px auto;
border: 0px;
text-align: left;
}
Matoca
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
