Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

How do I add a site or code on here?

Featured Replies

Hi,

 

I added a thread a few days ago asking to view my site and hopefully get some help..

But I think the way I added it with a link to my test site made people think it was dodgy or had a worm? or ??

Am I best to copy & paste the actual code on here?

 

Thanks Dan.

Hi,

 

I added a thread a few days ago asking to view my site and hopefully get some help..

But I think the way I added it with a link to my test site made people think it was dodgy or had a worm? or ??

Am I best to copy & paste the actual code on here?

 

Thanks Dan.

 

 

just put the address any old way and ill take a look.

  • Author
just put the address any old way and ill take a look.

Cheers,

The problem is In IE6 on the roll over images, the borders don't change color all the way down.

And the bottom image is in a lower position than if viewed in FF. Margin or padding problem?

This is a tutorial I have modified a bit while learning.

 

My test site is at http://www.danstestsite.talktalk.net

CSS is at http://www.danstestsite.talktalk.net/osteoDT.css

 

 

I'm finding browser checking a right pain...

 

Any advice much appreciated

Cheers,

The problem is In IE6 on the roll over images, the borders don't change color all the way down.

And the bottom image is in a lower position than if viewed in FF. Margin or padding problem?

This is a tutorial I have modified a bit while learning.

 

My test site is at http://www.danstestsite.talktalk.net

CSS is at http://www.danstestsite.talktalk.net/osteoDT.css

 

 

I'm finding browser checking a right pain...

 

Any advice much appreciated

 

 

I will look into the problem but i will comment on your site. Have you created this from scratch? due to i do like the heading/background alot. My input would be if your good with the old photoshop, i think this is the perfect layout and style for 3 nice image sub headings. i.e. Practitioner, Treated Conditions and Common Treatments in that yellow gives it that noob factor but i do like.

  • Author
I will look into the problem but i will comment on your site. Have you created this from scratch? due to i do like the heading/background alot. My input would be if your good with the old photoshop, i think this is the perfect layout and style for 3 nice image sub headings. i.e. Practitioner, Treated Conditions and Common Treatments in that yellow gives it that noob factor but i do like.

cheers,

I can' t take credit for the design, I followed an online tuturial.

Is noob bad?

cheers,

I can' t take credit for the design, I followed an online tuturial.

Is noob bad?

 

ermmm... depends on how you look at it, try a different font, maybe also test out some colours you wouldn't expect to use.

by "noob factor" snowy means it is apparent someone who is new to web design has done it... :)

Hope that helped, but yeah - try playing around a bit :)

  • Author

Oh Yeah noob thats me alright.

I am trying various designs out.

And will try fancy image sub headers, (thanks for tip)

 

But can you guys help with the IE6 problem?

 

How do you get a design to work in all browsers?

 

:huh:

But can you guys help with the IE6 problem?

 

How do you get a design to work in all browsers?

 

You should be able to get a page looking and working the same in Firefox, Opera and Safari as they are very similar; always code for these first.

 

You will still find that browsers have different default margins or padding on some tags like p ul ol li input and a few others so always set margings and padding yourself to overide the default settings.

 

IE and especially IE6 will often display differently and need different styles, so it often means that you have to add one or more conditional comments that only apply to IE or selected versions of IE. So design for Firefox, etc. first, then look at IE7 (which may not need much separate coding, if any) then check IE6. IE8 is fairly similar to Firefox but still has the different default margins and padding.

 

Add a conditonal comment(s) as described here:-

http://www.javascriptkit.com/howto/cc2.shtml

they must be put in the head section of every page AFTER any main stylesheet links so that the browser processes them second, but remember that any inline styles in the html markup will overide styles in stylesheets and conditional comments.

Just a quick one to add to Wickhams comments:

 

Have you tried adding a style reset sheet? i find these are great to work from (even if some people view the practice as abit old) as it basically resets the majority of the browser settings, giving you a blanker canvas to work from.

 

Reaper

  • Author

Cheers guys,

 

Wickham, I have seen these <!---IE> but just thought it was a comment.

Time to try them out, thanks for link.

 

Reaper, Resets I have seen them but do I leave it all as is or change some?

eg. this one http://meyerweb.com/eric/tools/css/reset/

Cheers guys,

 

Wickham, I have seen these <!---IE> but just thought it was a comment.

Time to try them out, thanks for link.

 

Reaper, Resets I have seen them but do I leave it all as is or change some?

eg. this one http://meyerweb.com/eric/tools/css/reset/

* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

 

Just having mi 2pence worth

  • Author

I'll try that 1st. So I can take out most of meyers beginning bit. Cheers Snowy.

  • Author

Hours later....this fixed it

 

<!--[if IE]>

<style type="text/css">

dl.pics dt a:hover, dl.pics dd a:hover { border:2px; }

dl.pics a:hover img {

border:2px;

}

</style>

<![endif]-->

 

"making border 2px again"

 

Also played with resets & margins to sort position.

 

:)

Thanks all.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.