Jump to content

Wickham

Advanced Member
  • Posts

    1,114
  • Joined

  • Last visited

  • Days Won

    5

Everything posted by Wickham

  1. 802px with two side margins of 10px should be correct within #wrapper 822px wide, but remove the float: left; as it isn't needed if the div fits exactly and IE6 does have a habit of doubling up margins where there is a float, so this should work in IE6 but I can't test IE6 at the moment:- #centeredmenu { background-color: #ddd; margin: 10px; /*float:left;*/ width:802px;/*100%; */ overflow:hidden; position:relative; }
  2. Newseed said If you have a 700px wide content div and you want to add 20px padding for both left and right of the div, then you will need to reset the width of the content div to 660px. Your #wrapper is 822px and that is why I edited the width of #centeredmenu to 802px with its new 10px side margins and that was OK in IE7 and Firefox, but I admit I didn't check IE6.
  3. It could be a lower case/upper case problem. Root.css is not the same as root.css. The css file needs to be in the same directory as the html file as you haven't used a sub-folder/sub-directory. Also use } not > for the closing tag of the style.
  4. I looked at the Services page where Firefox overlapped the footer. Your div class="column" has a height which isn't enough for Firefox. If you delete the height (I did it by mis-typing height) the div should find its own height:- id="main_content_no_left" style="hhhheight: 495px; width: 659px"> You should have a doctype at the top of your html file, before the tag:- /p> "http://www.w3.org/TR/html4/strict.dtd"> from here:- http://www.w3.org/QA/2002/04/valid-dtd-list.html You also have several ids and classes with no styles in the stylesheet, like:- page_wrapper main_content_wrapper wrap and column although you have an inline style in the html file for class="column" and if possible you should put styles in the stylesheet if they apply to more than one page. Edit: I've just looked at the Portfolio page where IE7 has enough height but Firefox doesn't and again the class="column" has a height of 312px which is not nearly enough for all the images, so delete the height, but I haven't tested this page.
  5. If you saved the php file to the www folder, it should be there! You can check by opening Windows Explorer and looking at local disk C:\\wamp\www and see what files are there, but you can't open them from there. Open WampServer2 and left-click the system tray icon and click Localhost to open your default browser. You can then enter http://localhost/filename.php or http://localhost/foldername/filename.php if you created a folder inside www. Wampserver gave you the option of naming its root as localhost or something else, but I can't remember what the alternative was. Whatever it was, you should see it as the alternative to localhost when left-clicking the system tray icon.
  6. You start by adding a background-color to #centeredmenu { background-color: #ddd; margin: 10px 0; float:left; width:100%; overflow:hidden; position:relative; } but the div is 100% wide and the gray sticks out a bit at both sides. Adding margins to tye sides cures the left side, but the right side sticks out further, so I adjusted the width and made the margin 10px all round:- #centeredmenu { background-color: #ddd; margin: 10px; float:left; width:802px;/*100%; */ overflow:hidden; position:relative; }
  7. At the moment you have a 10px top and bottom margin to #header and #content but none to #centeredmenu. The vertical spacing of #centeredmenu between them works better if you cancel the bottom margin of #header and the top margin of #content and add a top and bottom margin to #centeredmenu #header { width: 806px; height: 154px; margin: 10px auto 0 auto;/*10px auto;*/ background-image : url(images/header_test.jpg); background-repeat : no-repeat; } #centeredmenu { margin: 10px 0; float:left; width:100%; overflow:hidden; position:relative; } #content { clear:both; width: 800px; color: #000000; border: 1px solid #4e7fb6; background: #FFFFFF; margin: 0 auto 10px auto;/*10px auto;*/ padding: 0px; height: 350px; }
  8. WampServer 2 is the new version of WAMP5
  9. I can't see any difference for the first link in my IE7 with or without ActiveX compared with Firefox.
  10. What is the code on line 11? If it is just one character, perhaps it needs the special HTML code equivalents from this page:- http://www.tedmontgomery.com/tutorial/HTMLchrc.html Just a guess.
  11. Delete body padding and width as I said in my last post. body { margin: 0; background: #0d383f; color: #ffffff; /*padding: 50px; width: auto;*/ text-align: center; } Add padding to #container if you need it. Edit: I added this doctype at the very top of the html page:- /p> "http://www.w3.org/TR/html4/strict.dtd"> I said that padding and width don't apply to body which is nearly true. The body always has 100% width so width is irrelevant. Body cannopt have anything outside so margins which are outside normal elements like divs are inside the body. I thought padding was not applicable to the body but it seems to be working here. Most people don't use padding for the body, only margins which as I said, work internally.
  12. Is the space at the top about 20px? This is the default margin applied by all browsers (to sides and bottom as well but if your page is centered you probably haven't noticed that). Add margin: 0; to the body style:- body { margin: 0; background: #0d383f; color: #ffffff; /*padding: 50px;*/ /*width: auto;*/ text-align: center; } I've deleted padding: 50px; and width: auto; as these can't apply to the body. Only margin applies to the body. Apply padding and width to a containing div for the whole page, as you have done for width; you may have to add the padding to #container. Your #container has margin-left: auto; and margin-right: auto which is the correct way to center a div provided that there is a width (which there is) and I assume that this is your main container with everything else inside. You can simplify code by saying margin: 0 auto; which means 0 top and bottom and auto to sides or margin: 0 auto 0 auto; which is top, right, bottom, left.
  13. I've got a fix for it:- Put this conditional comment at the end of the head section, just before the closing tag:- and then put this class="inputbox" in all the input boxes like this (I've only shown one here):- Image 1 I haven't found the real cause, but the above only affects IE which was showing the input box too far to the left. Edit; I've just noticed that it already has one class, so a more correct solution is to put them together:- Image 1 name="filename1" id="filename1">
  14. Similar questions have been asked before, sometimes about WINAMP, but I think the resons are the same. I've got WINAMPSERVER which is the new WINAMP. You need to set a browser as the default browser for XAMPP and you can only operate PHP if you have files in the XAMPP folder (in Winampserver it's name is C:\wamp\www) and then you must open the folder and filename through XAMPP. It's no good trying to open a file via Windows Explorer or a file in any other folder.
  15. I've just found this link:- http://www.protware.com/ Look at the screenshots page. The program encrypts html and css files and also disables right-click screen printing. Has anyone tried this program? It looks as if it would deter the average Joe trying to copy images; the encryption probably works well so that just leaves the screen print as a possible way to capture an image if the disabling can be worked around. Can the disabling print screen be avoided? This is an extract from protware.com about trying to use Firefox's Media Save as or any other browser's "Save image" or "Save as":- Here comes the Image Guardian - it will split your images into pieces and will generate the appropriate code (which will be then encrypted by HTML Guardian) to display those pieces in your pages as if this is an integral, non-splitted image. This will make image theft nearly impossible - if someone wants to get some of your images, he/she will not be able to get the entire image, only a pieces of it saved under random, meaningless names. It will be very hard to determine that a certain piece is a part of a certain image. Let's say your website has 10 images, and you configured Image Guardian to split them into 3x3=9 pieces each - this will result in 90 image pieces with random names, mixed with a lot of images from other websites visited. A determined person may still be able to find all the pieces of a certain image, but finding them and joining them together to recreate the original image will require a lot of time, knowledge and expensive image editing programs(like Photoshop and similar). In most cases, this will also lead to a seriously decreased image quality. We can say that HTML Guardian's image protection will decrease the risk of image theft with 95-98% (but not 100%).
  16. There are three ways to make each menu tab text look a bit better:- 1. Center the text with text-align: center which still keeps the same overall width and the same width of each tab, but looks a bit better than left-aligned. To center all levels, change ul li { } from text-align: left; to text-align: center; which works in Firefox but IE7 shifts all the drop down boxes to the right so add a conditional comment in the head section after the main stylesheet link:- You say that the dropdowns get centered too, but you can center just the top level and leave the drop down level left-aligned, it's just a question of which you prefer. To leave the drop down level aligned left, make the above edits to center the top level and add this to the main stylesheet:- li li { text-align: left; } The top level will be centered and width 157px, the drop down levels will be left-aligned and also width 157px with the black box still directly under the top level. See my version here:- http://www.wickham43.com/forumposts/alamovictor090403.html and the css file:- http://www.wickham43.com/forumposts/alamostyle090403.css 2. If you delete all the widths, ul li style in your case, and give the style side padding or side margin, this gives even spacing to the top level but causes difficulties for positioning the drop down levels as they don't know how wide the top level is, so you can only position them from the left of the top level box and they may be wider which looks odd. Also, when a viewer increases text size it makes the top level wider and probably sends one or two tabs down to a lower row. This method isn't very successful. See my version here:- http://www.wickham43.com/forumposts/alamovictor090403-2.html CSS:- http://www.wickham43.com/forumposts/alamostyle090403-2.css 3. Make each tab and its drop down boxes a different width using classes. See my version here:- http://www.wickham43.com/forumposts/alamovictor090403-3.html and the css file:- http://www.wickham43.com/forumposts/alamostyle090403-3.css There are an awful lot of errors when using the validator http://validator.w3.org/ and I haven't corrected any, but I don't think any affect the structure of the my menu versions. The invisible scrollbars are not a very good idea as you need the main window scrollbars if the window resolution is too small for the whole menu width. I found out that the scrollbars are there, but you couldn't see them, so I made them light grey. The scrollbars to the div #maincontent are not sufficient in a small window.
  17. Good question! Apparently IE8 will never support the opacity attribute but there is an alternative. I got it to work here:- http://www.wickham43.net/opacity.php see item 1 for the code for -ms-filter -ms-filter: "alpha (opacity=75)"; OR use the emulate IE7 code to make your page be processed as IE7, as shown above item 1 in the above link.
  18. It looks exactly the same in my IE7 and Firefox, the ul tag items are on the left of the image and spread around the bottom of it. I don't see all the ul tag items below the image, only the last few lines. What exactly do you want?
  19. I think you missed this sentence in my link:- All the complications are in the stylesheet. See the /*HOVER POPUP LINKS*/ sections here and the html markup only needs to be:- picture However, you have lots of alternatives now from the other posts.
  20. Minor additional advice:- Add the CSS code to a new CSS file and then add the new CSS file to those pages you want the background image on. Add the additional stylesheet link AFTER the main stylesheet link as the last one processed takes precedence.
  21. Use a hover popup, see this page:- http://www.wickham43.net/hoverpopups.php
  22. Your site looks good in IE7 with the Monotype Corsiva CE font but as I expected, Firefox just shows italic Arial which is my browser default. However, Firefox shows the word "braemoray" superimposed over the words "Welcome to the Dunphail Web" so you should edit that. Edit: try this style change to correct the top margin:- .brae {text-align:center; font-family:"Monotype Corsiva CE"; font-size:50pt; color:#800000; font-style:italic; margin-top: 5px;} Your doctype is incomplete; it should be /p> "http://www.w3.org/TR/html4/loose.dtd"> See http://www.w3.org/QA/2002/04/valid-dtd-list.html It's amazing to see that IE is ahead of other browsers in showing special fonts from a url. Edit: use this site to see what your page looks like in other browsers http://browsershots.org/
  23. How long ago did you change the nameservers? Hours or days?
  24. I haven't got Monotype Corsiva CE in my browsers so I would not be able to use the font and my browsers would use the browser default style, usually Times New Roman or Arial, unless you specify the alternative. I notice that you have used font-face with a url. There is another method combining Flash and Javascript but it is complicated. Edit: I've been doing a little googling and found this http://home.tiscali.nl/developerscorner/fdc-varia/font-embedding.htm which implies that most browsers are not advanced enough to show an embedded font, so those browsers need an alternative. In the link above the last example which uses a .eot file src: url(acekrik0.eot); does show the font in my IE7 but Firefox shows the alternative Times New Roman from font-family: IE_ace, "Times New Roman", serif; which emphasises the need to specify alternatives unless you want a viewer to use their browser default which could be anything.
  25. font-family: Monotype Corsiva CE; is a font I haven't heard of before, so it's recommended that you always include an alternative font that is likely to be on all browsers and also a computer-safe font. Place you preferred font first, then the others, so that the browser takes the first that it can display:- font-family: "Monotype Corsiva CE", arial, monospace; Browser-safe fonts are listed here:- http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
×
×
  • Create New...