Skip to main content

Forums

Forum Replies Created

Viewing 15 posts - 1 through 15 (of 157 total)
  • Author
    Posts
  • in reply to: Flexbox Not Working On Safari #283075

    paulob
    Participant

    If you mean Safari 5.1.7 on Windows then that was discontinued and support dropped about 8 years ago long before flexbox was even thought of so is not surprising it doesn’t work properly.

    If the float:left was an attempt at a fallback for older browsers then if you remove the flex properties you will see that the columns do not go side by side at widths less than about 1300px because you have made them too wide 27.1% + 72% + 12px = ????

    Remove the px side padding and use a suitable percent or use the box-sizing:border-box model to avoid the boxes getting bigger.

    If you are indeed using Safari on Windows then I suggest that you uninstall it immediately as any unsupported browser is a high security risk these days. testing safari on windows is futile anyway because it does not represent normal safari on the mac any more and would be a waste of time to test against. There’s only a couple of misguided developers using it anyway :).

    in reply to: Center non responsive wrapper on devices #191344

    paulob
    Participant

    the tag above has a typo that was copied though

    Ooops sorry ;)

    in reply to: Center non responsive wrapper on devices #191335

    paulob
    Participant

    Hi,

    The space has gone for me on the ipad and iphone now.

    Perhaps you needed to clear the cache.

    Regarding the IE meta tag then use this one:

    <meta http-equiv="X-UA-Compatible" content="IE=Edge";

    That will make IE use use the latest rendering mode the browser supports and won’t drop into quirks mode or emulate older versions. (It won’t make it emulate a newer version of course).

    in reply to: Center non responsive wrapper on devices #191329

    paulob
    Participant

    Hi,

    The problem is caused by your dropdown navigation which for the ‘about’ menu items sticks out of the layout to the right by a hundred pixels or so.

    As you do not have a responsive site or a meta tag to control the site the device will work out the width of the site that it needs to display in its viewport and this will include all parts that overflow such as your dropdown menu. The space you see at the right is the room for the dropdown menu to fit into the screen.

    If you make sure that nothing sticks outside of your 1000px layout then the page will get zoomed to fit on the smaller device.

    You could do this by setting that last menu item to display at right:0 so that it doesn’t go outside your layout.

    e.g.

    .dropdown ul {
    position:absolute;
    display:none;
    right:0!important;
    left:auto!important;
    }

    You would also need to add a special class to that ‘about’ item and merge it into the code above (and to avoid using !important as I did just find the right specificity).

    Also I notice you are using the ie7 meta tag which will make all good versions of IE (including ie11) render like the worst version of IE. Unless you have a very good reason for doing this then you should be using the ‘edge’ meta tag value and not the ’emulate ie7′ value.

    in reply to: Help with two styles to a contact form, please. #175581

    paulob
    Participant

    HI Michael,

    If you click on “Edit Pen” in the bottom left corner of the codepen you will get access to the html and css.

    This is the CSS that creates the arrow:

    .select-wrap:after{
        content:"";
        position:absolute;
        right:8px;
        top:8px;
        z-index:2;
        width: 0; 
        height: 0; 
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;    
        border-top: 5px solid #000;
        pointer-events:none;
    }
    
    in reply to: Help with two styles to a contact form, please. #175458

    paulob
    Participant

    Hi Michael,

    In my codepen example the arrow is created using the :after pseudo element and absolutely placing a ‘css triangle” on top of the element. (I also used the before element to create a background to hide any text that might be near the arrow.)

    The example in the codepen uses a ‘trick’ where you wrap the select in an element that is set to be about 30px smaller width than the width set on the select. This means the select sticks out of the parent which is just enough room for the browser select arrow to be outside the main parent. You then hide the overflow on the parent and that means the arrow is now missing. Using the after element you can then absolutely place something on top of the select to represent the new arrow and it will be the same in all modern browsers. I used the css triangle trick but there is no reason why it couldn’t be a real image instead.

    You can only do this in modern browsers because normally placing something on top means that you can’t then click the element underneath which is where ‘pointer-events’ comes into play and allows the click to pass through this new element and interact with the select beneath.

    Hope that explains it :)

    in reply to: Help with two styles to a contact form, please. #175365

    paulob
    Participant

    Hi Michael,

    Unfortunately form controls have historically been tied closely to the os and the browser that displays them and have often been designed by the UA (user agent) to fit in with the style scheme of the browser.

    Many of the standard effects and design elements that you see on form controls are not available for styling and are pre defined by the browser. This has been a bugbear for many years.

    Once you start styling the form control you lose some of the pre-defined browser defaults (as you have already noticed) but as mentioned there are only certain things that can be styled anyway and this varies greatly between browser. Suffice to say that the opportunities for styling complex form controls like selects are limited. You can controls things like colour and background but you can’t change the appearance of a select much more than that with standard css. (Even height for selects is not supported in older versions of IE.)

    There is hope on the horizon and there are a lot of pre-fixed vendor specific rules that you can use these days for changing the default appearance of form controls but they are quite complex and vary between browser.

    As I mentioned in my post above the only consistent way to style a select is to use JS and swap it out for a normal list which you can style as you want. The JS then handles the data swapping in the background.

    There is also the issue of that if you change the appearance of a form element then a user may be confused as to what its purpose was. Form controls were originally designed so that they were consistent in all applications (for that browsers and OS) and users would always know what to expect and how to use the element.

    In the end you do what you can :)

    in reply to: Help with two styles to a contact form, please. #175330

    paulob
    Participant

    You could do that with my example but you’d need to supply an image for that button where I have the arrow code but all in all I really don’t think the effort is worth it. :)

    in reply to: Help with two styles to a contact form, please. #175327

    paulob
    Participant

    Hi,

    The best thing is just to give the select a solid background colour as default and then apply the gradient as per normal for browsers that understand it. You can’t however change the arrow button unless you want to get into a lot of pre-fixed browser code or use a lot of hacks.

    If you really want to style it cross browser then you will need one of those select replacement scripts that swap out the select for a styled list which you can style as you want and the js swaps the content in and out of the real select in the background.

    I had a go at styling the select and you can get reasonable results for modern browsers but you have to jump through hoops to leave it in a working state for older browsers.

    http://codepen.io/paulobrien/full/vdKax/

    Suffice to say that in most cases its best to leave it alone or just apply simple styling :)

    in reply to: Help with two styles to a contact form, please. #175295

    paulob
    Participant

    Hi,

    The depressed affect is the focus state of the button which a browser handles in its own way until you take charge of styling and then you lose many of the default actions of the button (this is similar to many other form controls)/

    In your first example you had focus rules applied for the button to re-instate this effect but did not have them in the page where you say it is not working.

    To style the button you would need to do something like this:

    .cform input[type="submit"] {
        background: linear-gradient(#e7dec6, #dfd0b1) repeat scroll 0 0 rgba(0, 0, 0, 0);
        border-top:2px solid #d8d5d2;
        border-left:2px solid #d8d5d2;
        border-bottom:2px solid #7d766c;
        border-right:2px solid #7d766c;
        border-radius: 5px;
        font-weight: bold;
        height: auto;
        padding: 3px 20px;
        width: auto;
    }
    
    .cform input[type="submit"]:focus {
        position:relative;
        top:1px;
        left:1px;
        border-top:2px solid #7d766c;
        border-left:2px solid #7d766c;
        border-bottom:2px solid #d8d5d2;
        border-right:2px solid #d8d5d2;
        outline:0;
    }
    
    in reply to: footer always on the bottom #175156

    paulob
    Participant

    Hi,

    For IE8+ you can do this very easily without needing to have any set heights on the footer which is ideal in a responsive design and needs no pushers, margins or space saving techniques.

    http://codepen.io/paulobrien/full/FKAxH/

    Remember though that you cannot nest the main wrapper or place it below other content because 100% is from top to the bottom and if you nest inside another element you will get height:auto and if you place it below another element in the flow you get 100% from where it starts leading to the footer going below the fold.

    You would just need to put your layout inside the above structure. Here is an example with a left fixed column:

    http://codepen.io/paulobrien/full/gGuEm/

    in reply to: [Solved] responsive percentage based right triangle #173882

    paulob
    Participant

    Hi,

    You can do something like this:

    http://codepen.io/paulobrien/full/FoACz/

    However it is a fixed ratio triangle although it scales up and down based on the width.

    I don’t think its possible with css borders to get any closer as you seem to want a ‘stretchy’ triangle that changes shape.

    You could do it with an actual triangle image and just hook its width and height into 50% of the viewport. Or perhaps use svg.

    in reply to: CSS Div Masks #173751

    paulob
    Participant

    Here’s a version that works in modern browsers Firefox, IE, Chrome (ones that understand transform and rotate).

    http://codepen.io/paulobrien/full/zvpCd/

    It’s a little bit too fiddly for real world usage but maybe someone can improve on it. :)

    in reply to: CSS Div Masks #173743

    paulob
    Participant

    That’s not my reading of the requirement, given the images he’s provided

    See the image in post 4 where the arrow is a continuation of the textured background and sits on top of the image that follows. Wolfcry’s example would not work like this as it simply rubs out the bottom of the image with a white background and should another image follow immediately it will be rubbed out and have a white gap.

    At least that’s how I saw it :)

    in reply to: CSS Div Masks #173734

    paulob
    Participant

    Hi,

    I think that the problem is more complicated than that as the OP seems to want that the arrow is a continuation of the image or background above and not just a colour match as such. If the background is a solid colour then its no problem but if the background is an image or a pattern then its not so easy to achieve.

    Here’s a codepen example that only works in webkit but I believe this is the effect required.

    http://codepen.io/paulobrien/full/aGnpk/

    Of course the simple way to do it would be to make transparent triangle images that match the end of the image above but would be a pain to create.

    There’s a nice example here of clippath and svg here:
    http://labs.sawyerhollenshead.com/lab/svg-clippath/

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