Member Avatar for sussy123

i have tried everything i can to my knowledge. i designed a layout in PS, then sliced it, and imported it in DW. I linked all the images i needed to link, i set a div tag for the entire layout the proper way, then i set a div tag to an image that i needed to add a web form in. i followed every tutorial on how to do this, and it seemed to work. but then when i add a form box , it everything looks fine, but when i preview, everything is shifted about, my slices are revealed and there are some lines across the layout! i do not know what else to do, as this site is due and i need serious help. i have customized a dreamweaver template in the past, but this is the first time i am doing a site from scratch...help please anyone.

  • 3 Contributors
  • 3 Replies
  • 107 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by !!underlink!!

Dani AI

Generated

@ sussy123 reported slices shifting and hairline lines when a form is added, and that the page looks different in IE8 versus Firefox. questioned the value of slicing, and warned about Photoshop-exported HTML using spacer GIFs and tables. Those observations point to two likely areas: brittle, image-sliced HTML and cross-browser defaults for form controls and inline elements.

Diagnostic checklist (high-value checks first):

  • Ensure a standards DOCTYPE is present (for modern pages use <!DOCTYPE html>) so browsers run in standards mode rather than quirks mode.

  • Use Firefox Inspector (F12) to view computed box models for the container, the slice images, and the form element. Look for unexpected margins, borders, or fractional (non-integer) widths.

  • Prevent inline-image gaps by forcing slices to be block-level and ensuring no scaling occurs. Small CSS fixes to try:

    img { display: block; }
input, textarea, select { margin: 0; padding: 0; box-sizing: border-box; }

  • Check that each <img> is output at its native pixel dimensions. Browsers resampling images can create seams/lines between adjacent slices.

Practical fixes and longer-term advice:

  • Hand-code the layout with semantic HTML/CSS rather than importing Photoshop’s generated HTML. Use a single background image, CSS sprites, or fewer larger slices to avoid subpixel rounding seams.
  • If immediate overlap is required, place adjacent slices with a 1px overlap or position them absolutely inside a fixed-size parent to hide hairline gaps.
  • To isolate the problem quickly: temporarily strip CSS, add visible borders to elements to see which box moves, then reintroduce rules selectively.

Rebuilding the layout with CSS (extract graphics only from Photoshop) will eliminate most cross-browser shifting and make forms reliable across modern browsers.

Recommended Answers

All 3 Replies

Member Avatar for sussy123

Ok silly me, just figured out that it works fine in IE8 but not in FF. Is the a way of correcting it so that it responds the same in FF as it does in IE? Anyone please.

Member Avatar for MidiMagic

Why did you slice it up in the first place?

Putting slices together does not work well if you also try to put something on top of the slices.

Member Avatar for !!underlink!!

do not just import the slices as HTML as PS will but spacer in the html and then it makes it very difficult to edit anything without destroying your formatt yourbetter of grabbing your graphics and rebuilding it manualy and creating a template

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.