Skip to main content

Forums

Forum Replies Created

Viewing 15 posts - 136 through 150 (of 157 total)
  • Author
    Posts
  • in reply to: IE silliness #154593

    paulob
    Participant

    Hi,

    I see the text in the buttons dropped well below the button which is caused by the line-height of 65px that you have added here.

    .rbVerticalButton .rbDecorated {
       display: block;
       height: 65px;
       padding-left: 6px;
       padding-right: 10px;
       border: 0;
       text-align: center;
       vertical-align: bottom;
       background-position: right -200px;
       line-height: 65px;
    }
    

    Change the line-height to match the height of the button and it will fit. You may need to do that with a special class if you are using that rule elsewhere and need the 65px line-height.

    You are also setting IE to run in IE7 mode:

    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    

    Remove that or change it to “edge”.

    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    

    Otherwise you are telling all good versions of IE to behave as the worst.:) Unless of course you have scripts that only work when IE is in IE7 mode and then it would be time to update the site .

    in reply to: [Solved] Border on photo with wp-caption gets cut off #154484

    paulob
    Participant

    Hi Lydia,

    Glad it helped.

    You may also want to address the smaller screen size as the image container is being sized much too big by that inline style on smaller screens. It might also be neater to pad the caption a little.

    .wp-caption .wp-caption-text{padding-right:20px}
    
    @media only screen and (max-width: 767px) {
    .wp-caption{width:100%!important}
    }
    

    You’ll have to test that though as I know little of wordpress and whether it will conflict with anything else. :)

    in reply to: [Solved] Border on photo with wp-caption gets cut off #154477

    paulob
    Participant

    Hi Lydia,

    Try my code out as I’m sure it will do what you want (unless I missed something obvious).

    box-sizing:border-box sets the box model of the image to include padding and borders. Your image is set to a max-width of 100% which means that if you add borders it is then too big.

    The box-sizing rule above ensures that even if you add padding and borders to the image it will still not be greater than 100% which would seem to be what you want :)

    in reply to: [Solved] Border on photo with wp-caption gets cut off #154474

    paulob
    Participant

    How about something like this for IE8+

    .content img.photo-border {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -ms-sizing:border-box;
    box-sizing:border-box;
    }
    
    in reply to: Strange results using normalize.css #154446

    paulob
    Participant

    Again, it is essential that you keep in mind I am very new to this and I feel like I am in physics class all over again from day one. It is quite intimidating, but I will get to the end and understand CSS on a high level with the help of people like you.

    No worries, I sometimes forget that there is a lot to take into at first and is possibly overwhelming when you are just getting to grips with the subject. There’s always something else to take note of and when you learn something it may only be applicable to the problem at hand so you need to learn strategies based on the differing content/ design that you are currently working with. That’s the problem and beauty of CSS in that you can do the same thing with many different approaches but usually only one of those approaches would be suitable for the current task in hand.

    For those living in such primitive conditions, I could print the web pages on paper, glue the sheets end to end, and affix them to an upper and lower roller with small hand cranks on both. ;) (Old engineering habit of being presented with a problem and finding a solution.)

    Touche :)

    There are some pages such as the one here that I have no idea how I will update it. I felt I could after thinking I did a good job on the index page, but considering all the mistakes I made with it, and all the coding (which is an unknown to me)

    You would need to define the task first and decide how you want that data to be presented and whether it should be in the same design as the new page. That will obviously present some difficulties considering the reduced space available in your current design (remember what I said about content first :)). You may want to create thumbnails of large images and then allow users to click them and open in a modal window (usually called a lightbox effect). This allows the content to fit into a more compact format as the large image hidden is hidden by default.

    Without wishing to confuse the issue we haven’t touched on the subject of small screens such as mobile and whether you should be creating a responsive design instead. Of course that is a whole new can of worms and is on the cutting edge of current practices. It complicates the design process considerably as you have to take into account variances in the screen width and adapt the design to cater for this. However, I think this is a step to far at your current level but something to think about as you progress with your skills.

    Don’t expect to get it right in one go and don’t worry about mistakes as we all make them (and still do). There’s always something new to learn so we are all in the same boat but just at a different stage.

    in reply to: Strange results using normalize.css #154324

    paulob
    Participant

    Hi,

    I’ll try to answer your queries as best I can but rather than accept what I say you should also research the points I make to make sure that I’m not talking rubbish :)

    I have concerns that some of the market I have built a base on will be unable to see the page as it is intended to be seen. Is there a way to do it that will accommodate older browsers?

    In reality you can never ensure that all people will see the page as you intended because you never know what settings they have decided is best for them via their browser controls. They can change, font, font-size, color etc, turn off images, turn off javascript and even apply their own stylesheet. Ultimately you have little control over the final result so its worth bearing this in mind.

    I’m also a little confused here as your original site did not display in IE7 and IE6 and yet you seemed quite happy with it? My demo display perfectly in IE6 apart from a couple of borders yet you are concerned about this? (Or maybe you weren’t happy with your original.)

    If I can clarify that I don’t actively support IE6 or IE7 any more (neither does most of the web) as their usage has dropped to 0.2% for IE6 and 0.5 % for IE7 and in a little while will have vanished completely. Therefore making html changes to accommodate dead browsers is foolish to say the least ( unless you have hard evidence that your users are all IE6 users).

    You have to draw the line somewhere. What are you going to do for people who have no electricty? :)

    If you have good reason to support out-dated browsers then yes you can accommodate them by adding more mark up to your page but that should always be a last resort.

    As I mentioned before if you wanted three borders you could simply make three nested divs around the layout and apply a different coloured border to each div. Of course that would have a knock on effect on the current layout and you’d have to change all the inner elements sizes and positioning to match. I’ll leave that for you work out as changing the html to support IE7 and under (when they already look almost perfect) is not something I will consider at this stage.:)

    As I mentioned above don’t take my word for this as I am echoing best practices but ultimately its your decision and feel free to ignore the advice if you think that it’s of prime importance.

    h1 is a text size so I’m confused about changing the font size.

    You are confusing structure with presentation again. An H1 is a heading tag (nothing more nothing less). It does not say anything about how it is supposed to look. You control the size with CSS (or just accept the browser default).

    e.g. in my demo (which I have updated with any code from this post – find the link in previous posts) you could change the size like this:

    .logo a{
        font-size:80%;
        text-align:center;
        padding:10px 20px;
        height:352px;
        color:#000;
    }
    

    The text has been centred and reduced. The height is needed to match up with the height of the image as shown in previous posts.

    For what I do, I’ve found it best to have both. The average consumer proved long ago that the packaging is more important than the product having bought junk just because the box looked nice. As I’m called upon for graphics and artifacts, it’s best to show both.

    This may be true outside of the web but the web is primarily about disseminating information and the phrase “content is king” is not bandied around for no reason. A number of users surf with css, images and js turned off in order to get to the content quicker and will never see the design.

    A lot of graphic designers think the web is the same as a sheet of paper and think that all the concepts that they learned for print also apply to the web. This is not true. The web is a vastly different medium with its own set of rules. Try drawing a picture on a piece of paper where the image is six inches wider and longer than the paper you are drawing on.

    However, there is no reason why sites can’t look good as well as well structured but as I mentioned a few times now you should be building your design around the content and not the other way around.

    In the end though it is your choice and if you think that the design really needs the embellishments that you have designed then by all means add them. I am only pointing out the practicalities and accepted practices.

    Some designs need to be complicated and intricate where the site is concerned with graphics but even then you would tailor the design to fit in with the requirements of the web and avoid structure that are hard to manage nicely.

    How far you go to achieve a design is up to you but you do risk complicating matters and should take that into account.

    I think I’ve said about as much as I can on that subject but feel free to so some research and see what others are saying. Some people will say the design is more important but I think you will find that most people say “content first”.

    Is there a point when the coding loads just as slow as a page using graphics?

    Even small images would incur more overheads than 100 lines of code. It’s all about managing resources but it isn’t wrong to add images where needed or where it makes life easier. On small sites you don’t really have to worry too much but in the end every byte does count. You often find that people gzip and minify everything but would still have achieved better results if they’d simply lost one large image.

    If you check the demo now I have added a fix for IE7 (using expressions to simulate the :after pseudo class – google “IE expressions” to learn more) and IE7 will now get your beloved bottom borders :)

    You will find the IE7 and 6 specific code within the “Conditional Comments” in the head of the page but you can see how this starts to make things more complicated when the hacks start mounting up.

    the following link http://dowebsitesneedtolookexactlythesameineverybrowser.com/ sums it up nicely. :)

    in reply to: Strange results using normalize.css #154022

    paulob
    Participant

    Hi,

    Weird I tried again and the post just doesn’t show up.

    I’ll answer a few point below and see if this works!

    Will this display on all browsers?

    The :before and :after pseudo classes work from IE8+. Older browsers just won’t get the border which is no big deal.

    I notice the header and logo load slow, and the text in their areas overly large and rather askew.

    They load ok for me but there will always be a delay over images and the normal css backgrounds and borders (just look at any site not in your cache). That’s just the way it works. The images aren’t excessively large so there’s no problem there. It may be you just have a slow server but seemed fine from this end.

    The hidden text under the header and logo is there for accessibility but you can make it a lot smaller by just changing the font-size for those elements. Just find the class on those elements and apply a smaller font-size.

    Does it need to be H1 and H2?

    You should always have h1 on a page and then use a logical heading structure through the page starting with h2 etc. Forget about how a page looks the html should be semantically sound and have a proper structure so that screen readers and search engines can make sense of it. Yoo should be able to read an html page almost like reading a book with headings and sub headings and sections in the right order.

    CSS doesn’t care what tags you use as it can style them exactly as they need to be styled. Don’t mistake the default appearance of a tag for presentation. Use html for structure and CSS for presentation.

    An oddity which I can’t explain is what occurs when I substitute the image “header.png” for “header.gif”

    I changed the image on your live site using Firebug and couldn’t see a difference even with the pages side by side. You may need to upload the image so I can see if it makes a difference when you do it.

    If I wanted to put a header across the page being is the width of the
    div id=”outer”

    You’d basically just add a div inside #outer but before the two columns and then it will automatically spread across #outer. Of course if you have fancy borders and things then you may need some negative margins to overlap the gutters on the page as I did with the other header and logo.

    in reply to: Strange results using normalize.css #154014

    paulob
    Participant

    Hi,

    I wrote a reply to this this morning but the post isn’t showing so it may have gone into moderation or something. If the post doesn’t turn up later I’ll reply again.

    in reply to: Strange results using normalize.css #153932

    paulob
    Participant

    Hi,

    The coloured line is the replaced text peaking through the gap in the header.

    Hide it with this:

    .header{overflow:hidden}
    

    You can’t add a bottom border to #inner because the side borders are created with images and the bottom border would spoil the effect.

    Without adding an extra element we can use the :before psuedo class (IE8+) to add another border in the same way we used the :after pseudo class.

    Add this:

    #inner:before{
    content:" ";
    position:absolute;
    bottom:0;
    left:2px;
    right:2px;
    border-bottom:1px solid #22201c;
    }
    

    Generally having three borders around things is not a good design move because you basically need 3 elements before you start and that complicates things from the get go as you are producing extra mark up for the design when the mark up should be for content.

    Keep it simple as I mentioned before. I guarantee that 99% of users would not know that you had 2 or 3 borders and indeed I can’t spot them until I zoom up to 400% :)

    For modern browsers you could probably have just use an inset box-shadow instead to give a feeling of depth. Anyway the code I offered above should resolve the issue.

    in reply to: Strange results using normalize.css #153876

    paulob
    Participant

    Hi,

    I’ve updated my demo and removed the left and right border from the wrapper and inner and instead used a repeating slice to tile the borders down both edges and the main dark background colour. (Remember to refresh two or three times or the images won’t update)

    On the inner element I’ve overlaid the right side fade image so that it merges both into the header and into the repeating background underneath.

    I also added an extra border at the bottom using the pseudo class :after rather than use an extra html element.

    This is pretty close to to your original while still keeping the html as straight forward as possible. The right side should be exact now as it is an image cut from your image and then merges into a repeating slice at the bottom so the layout will continue to grow.

    You shouldn’t really try to replicate the photoshop fading borders on every element as its just too much work. Remember people visit the site for the content and not the design. Ugly sites with good content do better than nice looking sites with no content.

    In essence you are doing this in reverse because your content should be the first priority and then you design the site around the content (although in reality you do both in tandem).

    I think you have enough information now to complete this as all the elements are in place.

    in reply to: Strange results using normalize.css #153833

    paulob
    Participant

    Hi,

    Before I offer fixes an important point to remember is that some things are not viable for the web and just because you can draw them doesn’t mean that they can be implemented or are a good idea. Many designers do not understand this concept because they work on fixed pieces of paper, The web is not fixed in any shape or form and this needs to be considered in the design and then the design amended to work the best way for its current medium.

    With that out of the way we can look at your comments :)

    1) The pixel border at the top of the design and the right of the design can be removed with:

    #outer{
    border-top:none;
    border-right:none;
    }
    

    2) The border on the right of the right content can be removed with.

    #main{border-right:none}
    

    3) I’m not sure what you mean about the fade into the header as it looks ok to me but you can just create a wider slice. I’ve changed my demo and used this image (refresh your browser to see it ). However you can probably make a neater fit from your source files but you need to leave off the extraneous borders.

    I changed the background properties a little so these three rules have now changed are amalgamated with the other changes I mentioned above.

    #outer {
        width:980px;
        margin:auto;
        padding:1px;
        border:1px solid #7d766c;
        border-top:1px solid #eae3d6;
        background:#343433;
        color:#000;
        border-top:none;
        border-right:none;
    }
    
    #inner {
        padding:0 9px 9px;
        border:1px solid #22201c;
        border-top:none;
        border-right:none;
        background:#343433 url(images/xright_column_image.gif) no-repeat 100% 0;
    }
    #main {
        border:1px solid #343433;
        border-top:none;
        border-right:none;
        background:#e7dec6;
        min-height:470px;
        display:table;
        border-collapse:collapse;
    }
    

    The demo has been updated (refresh browser a couple of times).

    I think that’s as close as you will get to those multiple fading borders as they just aren’t viable for the web (unless we use CSS gradients and then support is only the very latest browsers).

    in reply to: Strange results using normalize.css #153811

    paulob
    Participant

    Hi,

    You can always take my demo code (just view source as all the code is in the head) and it will work back to IE6 (unlike yours). I know there are some small visual differences but they are minor.

    Assuming you are only going to add content into these beige background areas then you don’t need to do anything special except put your content into those areas as required. The design will grow with content if needed and won’t break.

    As I said above I would have redesigned the logo and header so that they didn’t need negative margins but assuming that display is the same on all pages then you can leave them as it is as they will work the way they are.

    The code is quite simple and is basically two divs side by side using display:table-cell for ie8+ and floated for ie7 and under. The two main wrappers are needed because of the background effect you have around the content and enables a pattern to be repeated.

    Apart from that and the negative margins to squeeze the logo into a smaller space than their widths would usually allow the rest is pretty straight forward.

    in reply to: Strange results using normalize.css #153797

    paulob
    Participant

    Hi,

    The problem with your page is it is too fragile and prone to break at the slightest discrepancy. The biggest flaw in beginners web design is setting heights on containers that hold fluid content. That is the number 1 design error.

    If you simply zoom the text in the browsers controls your content jumps out of the left column and into black space. Now do the same thing to my demo (zoom “text only” in Firefox browser controls) and see the massive difference. Ultimately you have no control over what font size the user may have specified so you have to accept that the text may be bigger or smaller than you designed and then allow for that in your design, i.e. your design should grow or shrink with text zoom. The simplest way to do this is to let content dictate the height and don’t use fixed heights. Also what happens when other pages need more content in those sections?

    The backgrounds should be accomplished with repeating graphics so that they can grow and shrink as in my example.

    Whether you take my advice or not is up to you and you may well get away with it as it is but on the other hand it may break irretrievably down the line so you are better getting it right now.

    Keep it simple and logical and don’t fix heights on content where you will be holding fluid text as you never know what size that text will be – you have virtually no control over that as it is down to the user and their preferred settings.

    Lastly if you do use empty elements to create your borders and graphics then usually you wouldn’t let them take part in the flow but just absolutely place them into position. For example if you add clear:both to .info you can see it drops below your floated border graphic and breaks the layout. A layout shouldn’t be that fragile.

    Hope that some of this helps but I appreciate you may have deadlines to meet but you wouldn’t build a house on shaky foundations would you :)

    in reply to: Strange results using normalize.css #153679

    paulob
    Participant

    Hi,

    Never use design view in Dreamweaver. It’s not a browser and it’s more wysiwtf than wysiwyg.

    Just use the code editor (which is very good) and code by hand and then view the result in a real browser (or two or three browsers).

    I usually load the page I’m working on in three browsers (IE, Firefox and Chrome) and as soon as I change the css or html (or at regular intervals) I just click refresh in each browser to see the result. That’s the most reliable way and also does most of your browser testing while you design. Don’t use the F12 preview in DW either as that is also occasionally broken and sometimes doesn’t give true results.

    That’s the way I work anyway.

    in reply to: Strange results using normalize.css #153467

    paulob
    Participant

    Hi,

    Sorry for the delay in replying but have been a bit pushed for time.

    Here is a very rough demo of how I would go about this.

    The code is in the head so just view source. I left your normalise.css in place but then added the main styling rules after it.

    If I had time I would have changed things around to avoid the negative margins I used to overlap your logo and header onto the borders as you had incorporated borders onto your images. Indeed those multiple borders are a little fiddly and I would have simplified them in some way (e.g. left them out).

    The page is in two columns with content stacked in each column. The columns use display:table-cell to keep the full length dividing border (ie7 and under get floated columns instead as they don’t understand display:table properties).

    For your icons I would normally have used the same image replacement technique I used for the logo but was short of time so just used text-indent to hide the text (not the best technique for accessibility).

    The rest is pretty straight forward.

    Hope it’s of some use anyway and sorry that I didn’t have to time to make it perfect.

Viewing 15 posts - 136 through 150 (of 157 total)
icon-link icon-logo-star icon-search icon-star